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