一、需求:
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修改掉
- 深拷贝
this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange));
JSON.stringify()对象转为串,JSON.parse()串转为对象,JSON操作是深拷贝操作
- 原理
浅拷贝:新对象赋值,只是取的旧对象栈中的值,也就是引用对象的值
深拷贝:会在堆里边开辟一个空间,存放自己的对象值