由vue遍历对象引发对深度拷贝的思考

项目中用v-for遍历一个对象{ count:"",age:""}进行参数渲染，输入参数后送到后端要转化为JSON字符串，于是提交之前新声明了一个对象，值为原先对象的JSON.stringify字符串。但是，问题来了，后端接口还没部署上去，调用的时候是502,接口调用不成功不会走剩下的流程。 此时，数据已经改动为JSON字符串了，v-for遍历的对象改成JSON字符串“{“count”:“bb”,“age”:“ff”}”。于是遍历时就以字符串的形式进行渲染，出现如下图所示的参数渲染。 那么，如何避免出现这种情况呢？

需要对对象进行深拷贝。

深拷贝使得拷贝过来的对象不修改原对象。上面的表现就是因为拷贝的对象是浅拷贝，当修改新拷贝出来的对象时，原对象同时也被修改了。

对象的深度拷贝 第一种：JSON.parse(JSON.stringify(obj)); 第二种：Object.assign 第一种是完全深度拷贝，第二种使用时要注意了 对于Object.assign

第一级属性是深拷贝，第一级以下是浅拷贝 let origin = { key1:“1”，key2:”2”,key3:{ a:1,b:2 }} let copyfromOrign = Object.assign({},origin); copyfromOrign.key3 = { a:3,b:4} console.log(origin); console.log(copyFromOrigin); //两个都是返回{key1:”1”,key2:”2”,key3:{ a:”3”,b:”4”}} //两个都是返回{key1:”1”,key2:”2”,key3:{ a:”3”,b:”4”}}

数组深拷贝除了用JSON.parse(JSON.stringify(arr1))外，还有其他的方法。 1、一维数组

let arr1 = [1,2,3]; let arr2 = arr1.concat();

2、多维数组

let arr2 = JSON.parse(JSON.stringify(arr1));

3、es6使用一维数组

let arr3 = [...arr]; let [...arr4] = arr;