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移動端彈框組件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中select下拉框的默認選中項的三種情況解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
關(guān)于element?ui中的el-scrollbar橫向滾動問題
這篇文章主要介紹了關(guān)于element?ui中的el-scrollbar橫向滾動問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue-cli3.0使用及部分配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vxe-table vue 表格禁用單元格編輯的兩種實現(xiàn)方式
本文介紹vxe-table禁用單元格編輯的兩種方式,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-06-06
Vue?3.0是一個非常流行的JavaScript框架,不僅易于學習和使用,而且可以與許多UI框架集成,下面這篇文章主要給大家介紹了關(guān)于vue3.0+ts引入詳細步驟以及語法校驗報錯問題的解決辦法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue3中使用medium-zoom方法的相關(guān)資料,Medium Zoom是一個輕量級的JavaScript庫,用于實現(xiàn)類似Medium網(wǎng)站的圖片點擊放大縮放效果,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
vant實現(xiàn)自定義日期時間選擇器(年月日時分秒)
使用vant作為UI組件時,需要一個日期時間選擇器,vant中有Dateicker和TimePicker,可以將兩個組件組合封裝使用,下面就來詳細的介紹一下2025-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單驗證功能，基于NUXT的validate方法實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
當市面上主流的組件庫不能滿足我們業(yè)務(wù)需求的時候,那么我們就有必要開發(fā)一套屬于自己團隊的組件庫,下面這篇文章主要給大家介紹了一個基于vue3+ts+vite項目搭建的相關(guān)資料,需要的朋友可以參考下2022-05-05