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