VUE - 数组内新push的对象被修改，其他的对象属性同时被修

最近在项目开发过程中，遇到了这样一个问题：

数组存储表单对象，但在存储时，会发现新push的对象被修改后，数组中原被添加的对象同时被修改。

最开始直接使用push方法：

this.result.push(obj);

开始误以为push方法的原因，换成vue提供的$set方法修改元素某个索引上的值。

var len = this.result.length;
 this.$set(this.result, len, obj);

然而并不是这个原因，不管是push还是$set其实都可直接改变数组。真正的原因如下：

原因

因为对象是引用类型，传递的是引用地址，所以每次push的都是同一个对象，只要其中一个对象改变，就会导致数组中其他对象的改变。

解决办法

就是将需要放入数组的对象先深拷贝一份，用拷贝的对象，这样就不存在引用关系了。

Object.assign({},需要push的对象)可以，用lodash中的assign也行，只要是深拷贝就行。

 let data = Object.assign({},JSON.parse(JSON.stringify(obj)));
 this.result.push(data);

类似于下面这种情况：

var obj = {
    a:1,
    b:2
}
var arr1 = [];
arr1.push(obj);

var arr2 = [] ;
arr2.push(obj);

obj.b = 3
// 会发现 arr1和arr2中的obj.b都是3了。

原因同理，对象是引用类型，传递的是引用地址，所以两个数组引用的是同一个对象，只要其中一个对象改变，就会导致数组改变，进而另一个引用的数组也会改。

解决办法如上