vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)
更新時間：2022年09月08日 08:44:30 作者：因為你不會，所以你才會
這篇文章主要介紹了vue對象復(fù)制方式(深拷貝,多層對象拷貝方式在后面)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue對象復(fù)制
使用：es6中的“對象擴(kuò)展運(yùn)算符 ”，如下
// 對象深拷貝
obejctCopy() {
// 源對象小李
const source = { name: '小李', age: 18, gender: '男', school: '清華大學(xué)' }
// 拷貝小李
const copy1 = { ...source }
// 拷貝小李，并修改名字為小張
const copy2 = { ...source, name: '小張' }
// 修改源對象
source.age = 19
// 查看結(jié)果
console.log(source)
console.log(copy1)
console.log(copy2)
}結(jié)果：可見拷貝出來的對象，與源對象無關(guān)，深拷貝完成
更新
經(jīng)網(wǎng)友指出，當(dāng)對象中還包含對象時，則里層對象還是淺拷貝，驗證代碼
// 源對象小李
// const source = { name: '小李', age: 18, gender: '男', school: '清華大學(xué)' }
const source = { name: '小李', age: 18, gender: '男', school: '清華大學(xué)', more: { a: "test", b: 2, c: {} } }
// 拷貝小李
const copy1 = { ...source }
console.log(source === copy1) // false
console.log(source.more === copy1.more) // true若要里層拷貝則需要再次使用...，如下
// 源對象小李
// const source = { name: '小李', age: 18, gender: '男', school: '清華大學(xué)' }
const source = { name: '小李', age: 18, gender: '男', school: '清華大學(xué)', more: { a: "test", b: 2, c: {} } }
// 拷貝小李
const copy1 = { ...source, more: { ...source.more } }
console.log(source === copy1) // false
console.log(source.more === copy1.more) // false我的理解
==比較對象的時候還是比較的引用地址是不是同一個。在多層拷貝中，雖然“對more的引用”這個操作被復(fù)制了，但是引用指向的“more對象地址”還是同一個，內(nèi)存中實際上只有一個“more”。因此要再次復(fù)制more才可以
vue對象復(fù)制的坑--對象深度拷貝
錯誤描述
使用vue store 存儲的復(fù)雜對象，在其它文件中將其賦值給其他變量后，被賦值對象修改后，store中存儲的對象也被修改了。。。
解決辦法
如：depttreedata 為存儲在store->getters中的非簡單對象，將其拷貝給dept02data 對象可以寫作：
let dept02data = JSON.parse(JSON.stringify(this.$store.getters.depttreedata));
之后引用dept02data 則不會影響原對象。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用vue項目配置多個代理的注意點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了ant-design-vue中tree增刪改的操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏
這篇文章主要介紹了vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁面的 history 模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue.js項目 el-input 組件 監(jiān)聽回車鍵實現(xiàn)搜索功能示例
今天小編就為大家分享一篇vue.js項目 el-input 組件 監(jiān)聽回車鍵實現(xiàn)搜索功能示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue框架可以很方便的引入各種插件,但是也因此會經(jīng)常遇到種編譯報錯,這篇文章主要給大家介紹了關(guān)于vue前端編譯報錯解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue中vite.config.js配置跨域以及環(huán)境配置方式
這篇文章主要介紹了vue中vite.config.js配置跨域以及環(huán)境配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue中的虛擬DOM是通過JavaScript對象來描述真實DOM結(jié)構(gòu)的一種方式，本文將介紹Vue中虛擬DOM的簡單實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2023-05-05
Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了基于vue.js實現(xiàn)圖片輪播效果，vue如何實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12