将对象push进数组时 引用指针问题

一、需求：
1.点击增加按钮，弹框，用户手动输入数据，

2.点击确定，将数据保存到上表中
二、最初代码及遇到的问题
1.代码

2.问题
保存后，新增的表单数据跟随弹框数据发生变化

三、原因及解决方案
1.原因
使用vue框架开发时，数组push一条对象而导致之前push进去的对象也变成后面进去对象的值。后来发现是因为push对象时，指针一直指向的是之前输入框绑定的对象地址，所以输入框下次输入时值改变，数组内的值也就变了。
2.方案
palyA：

代码繁琐，pass

playB:

通过JSON转化，将浅拷贝转化为深拷贝，搞定！

四、总结
1.浅拷贝
当一个对象赋给另一个对象时，修改另一个对象的值会影响前一个对象的值

let a = this.vehicleChange;
let b = this.vehicleCangeData;
b = a;

比如，此时如果修改b对象中的name，会同时吧a对象中的name修改掉

2. 深拷贝

this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange));

JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作

3. 原理
   浅拷贝：新对象赋值，只是取的旧对象栈中的值，也就是引用对象的值
   深拷贝：会在堆里边开辟一个空间，存放自己的对象值