vue對象復制方式(深拷貝,多層對象拷貝方式在后面)
更新時間：2022年09月08日 08:44:30 作者：因為你不會，所以你才會
這篇文章主要介紹了vue對象復制方式(深拷貝,多層對象拷貝方式在后面)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue對象復制
使用：es6中的“對象擴展運算符 ”，如下
// 對象深拷貝
obejctCopy() {
// 源對象小李
const source = { name: '小李', age: 18, gender: '男', school: '清華大學' }
// 拷貝小李
const copy1 = { ...source }
// 拷貝小李，并修改名字為小張
const copy2 = { ...source, name: '小張' }
// 修改源對象
source.age = 19
// 查看結果
console.log(source)
console.log(copy1)
console.log(copy2)
}結果：可見拷貝出來的對象，與源對象無關，深拷貝完成
更新
經網友指出，當對象中還包含對象時，則里層對象還是淺拷貝，驗證代碼
// 源對象小李
// const source = { name: '小李', age: 18, gender: '男', school: '清華大學' }
const source = { name: '小李', age: 18, gender: '男', school: '清華大學', 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: '清華大學' }
const source = { name: '小李', age: 18, gender: '男', school: '清華大學', 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的引用”這個操作被復制了，但是引用指向的“more對象地址”還是同一個，內存中實際上只有一個“more”。因此要再次復制more才可以
vue對象復制的坑--對象深度拷貝
錯誤描述
使用vue store 存儲的復雜對象，在其它文件中將其賦值給其他變量后，被賦值對象修改后，store中存儲的對象也被修改了。。。
解決辦法
如：depttreedata 為存儲在store->getters中的非簡單對象，將其拷貝給dept02data 對象可以寫作：
let dept02data = JSON.parse(JSON.stringify(this.$store.getters.depttreedata));
之后引用dept02data 則不會影響原對象。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了undefined是否會變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue-cli4 配置 element-ui 按需引入操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue中定時器setInterval的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
lottie實現vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實現vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
本篇文章主要介紹了Vue學習筆記進階篇之vue-router安裝及使用方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue父組件異步如何獲取數據傳給子組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
在遇到chunk-vendors.js文件的語法錯誤時,可以嘗試在vue.config.js文件中添加transpileDependencies參數進行配置,這通過明確指示哪些依賴需要被babel轉譯,從而幫助解決編譯過程中的語法問題,此方法適用于Vue項目中遇到的相關錯誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項目過程中，經常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
利用vuex-persistedstate將vuex本地存儲實現
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲的實現，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04