目录Vue对象的深度克隆方法1方法2方法3vue克隆对象时遇到的问题vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbOb
通过js序列化,将js转换成字符串,然后再将字符串转换成js对象
var olbObj = {a:1};
var str = JSON.stringify(obj); //序列化对象
var newobj = JSON.parse(str); //还原
//相当于
var newObj = JSON.parse(JSON.stringify(olbObj ))
es6语法对象展开运算符进行对象的展开赋值
var a = {a:0}
var b = {...a}
进行对象的遍历复制,对 对象的每一条属性进行复制,这样就能进行对象的深度克隆
function newobj(obj) {
var str, newobj = obj.constructor === Array ? [] : {};
//constructor 属性返回对创建此对象的数组函数的引用。创建相同类型的空数据
if (typeof obj !== 'object') {
return;
} else {
for (var i in obj) {
if (typeof obj[i] === 'object'){//判断对象的这条属性是否为对象
newobj[i] = newObj(obj[i]);//若是对象进行嵌套调用
}else{
newobj[i] = obj[i];
}
}
}
return newobj;//返回深度克隆后的对象
}
我们知道 当我们需要深克隆一个对象 或者数组时 改变这个得到的数据,原数据保持不变 比较简单的用到的函数基本都是
let b = JSON.parse(JSON.stringify(a))
但是假如我们克隆一个vue响应式对象时 发现用这个方法没啥用
所以需要一个工具函数老深克隆
//深克隆
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)
这样就得到响应式的啦
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue对象的深度克隆方式
本文链接: https://lsjlt.com/news/167106.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0