Vue深拷貝(deep clone)是指創建一個新對象,這個新對象和原對象有相同的屬性和值,但是完全彼此獨立,對其中任何一個對象的更改不會影響到另一個對象。在Vue中,經常需要使用深拷貝來避免對象影響到其他組件或全局狀態。
Vue提供了一個$set方法來手動觸發響應式更新,但是使用該方法前需要判斷數據是否是引用類型,如果是需要進行深拷貝,否則$set會失敗,Vue的響應式系統就無法正常工作。
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
let clone = Object.assign({}, obj);
Object.keys(clone).forEach(key =>{
clone[key] = deepClone(clone[key]);
});
if (Array.isArray(obj)) {
clone.length = obj.length;
return Array.from(clone);
}
return clone;
}
const obj = {
a: 1,
b: {
c: 2
},
d: [3, 4],
e: null
};
const newObj = deepClone(obj);
console.log(newObj); // {a: 1, b: { c: 2 }, d: [3, 4], e: null}
console.log(newObj === obj); // false
console.log(newObj.b === obj.b); // false
以上是一個遞歸函數deepClone,它可以處理普通對象和數組。函數首先判斷是否需要拷貝,如果不是對象或者是null則直接返回。如果是對象,則使用Object.assign創建一個新對象并遍歷拷貝每個屬性,如果是數組則使用Array.from創建一個數組。
需要注意的是該方法雖然簡單易用,但是并不完美,它無法拷貝函數、正則、Map、Set等特殊對象,如果需要處理這些特殊對象則需要額外的處理。
上一篇python 有啥用
下一篇python 腳本可執行