vue對象的深度克隆方式

更新時間：2022年09月08日 09:07:40 作者：久違°

這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue對象的深度克隆

方法1

通過js序列化，將js轉(zhuǎn)換成字符串，然后再將字符串轉(zhuǎn)換成js對象

var olbObj = {a:1};
var str = JSON.stringify(obj); //序列化對象
var newobj = JSON.parse(str); //還原
//相當于
var newObj = JSON.parse(JSON.stringify(olbObj ))

方法2

ES6語法對象展開運算符進行對象的展開賦值

var a = {a:0}
var b = {...a}

方法3

進行對象的遍歷復(fù)制，對對象的每一條屬性進行復(fù)制，這樣就能進行對象的深度克隆

function newobj(obj) {
? var str, newobj = obj.constructor === Array ? [] : {};
? //constructor 屬性返回對創(chuàng)建此對象的數(shù)組函數(shù)的引用。創(chuàng)建相同類型的空數(shù)據(jù)
? if (typeof obj !== 'object') {
? ? return;
? } else {
? ? for (var i in obj) {
? ? ? if (typeof obj[i] === 'object'){//判斷對象的這條屬性是否為對象
? ? ? ? newobj[i] = newObj(obj[i]);//若是對象進行嵌套調(diào)用
? ? ? }else{
? ? ? ? newobj[i] = obj[i];
? ? ? }
? ? }
? }
? return newobj;//返回深度克隆后的對象
}

vue克隆對象時遇到的問題

我們知道當我們需要深克隆一個對象或者數(shù)組時改變這個得到的數(shù)據(jù)，原數(shù)據(jù)保持不變比較簡單的用到的函數(shù)基本都是

let b = JSON.parse(JSON.stringify(a))

但是假如我們克隆一個vue響應(yīng)式對象時發(fā)現(xiàn)用這個方法沒啥用

所以需要一個工具函數(shù)老深克隆

//深克隆?
export const deepClone = (source) => {
? var sourceCopy = source instanceof Array ? [] : {}
? for (var item in source) {
? ? sourceCopy[item] = typeof source[item] === 'object' ? deepClone(source[item]) : source[item]
? }
? return sourceCopy
}
let b = deepClone (a)

這樣就得到響應(yīng)式的啦

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: