Vue3如何獲取proxy對(duì)象的值而不是引用的方式
更新時(shí)間：2023年10月23日 15:06:41 作者：Mao.O
這篇文章主要介紹了Vue3如何獲取proxy對(duì)象的值而不是引用的方式,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
情景
vue3中定義一個(gè)響應(yīng)式對(duì)象：
let obj1 = reactive({userName:"tom", age:5, hobby:{a:"av",b:"bv"}});
打印obj1，結(jié)果為proxy對(duì)象
定義第二個(gè)響應(yīng)式對(duì)象：
let obj2 = reactive({
userName:"",
age:"",
hobby:{}
})
將對(duì)象obj1賦值給對(duì)象obj2
obj2 = obj1
賦值沒(méi)問(wèn)題
但是！當(dāng)我們修改兩個(gè)對(duì)象中的一個(gè)，那么另一個(gè)對(duì)象會(huì)和被修改的對(duì)象同步。
例如：當(dāng)我們修改obj2的 age為8后，那么obj1的值也會(huì)變?yōu)?。
這是因?yàn)楫?dāng)我們執(zhí)行obj2 = obj1時(shí)，我們賦值給obj2的并不是obj1的內(nèi)容，而是obj1的內(nèi)存引用。
解決
目的：獲取proxy對(duì)象的值
方式一：擴(kuò)展運(yùn)算符
obj2 = {...obj1}
方式二：Object.assign()
obj2 = Object.assign({}, obj1);
獲取深層對(duì)象值
obj2.hobby = {...obj1.hobby}
or
obj2.hobby = Object.assign({}, obj1.hobby);到此這篇關(guān)于Vue3如何獲取proxy對(duì)象的值而不是引用的方式的文章就介紹到這了,更多相關(guān)Vue3獲取proxy值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue的路由及路由鉤子函數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue的路由及路由鉤子函數(shù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue.js每天必學(xué)之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了如何修改vuex里面的數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
基于vue2.0動(dòng)態(tài)組件及render詳解
下面小編就為大家分享一篇基于vue2.0動(dòng)態(tài)組件及render詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于Vue入門的相關(guān)資料，是一篇超完整的Vue入門教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
vue.js vue-router如何實(shí)現(xiàn)無(wú)效路由(404)的友好提示
眾所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁(yè)面應(yīng)用，下面這篇文章主要給大家介紹了關(guān)于vue.js中vue-router如何實(shí)現(xiàn)無(wú)效路由(404)的友好提示的相關(guān)資料，需要的朋友可以參考下。2017-12-12
在Vue.js開發(fā)中,我們經(jīng)常需要?jiǎng)?chuàng)建可復(fù)用的組件,這些組件可能會(huì)有自己的樣式規(guī)則,而有時(shí)我們希望父組件能夠影響子組件的樣式,本文將詳細(xì)介紹如何使用v-deep以及一些相關(guān)的最佳實(shí)踐,需要的朋友可以參考下2024-10-10
Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作
這篇文章主要介紹了Vuex的插件vuex-persistedstate數(shù)據(jù)持久化存儲(chǔ)操作,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了Element Rate 評(píng)分的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07