问题描述

在使用vue，操作dialog中的form数据时，点击取消时发现，再点击一个不同的行，则该行原有的数据就会变成第一次打开时数据，导致了数据混乱。

原理

出现这类问题，大概率是当首次点击dialog时，将此时form中的数据进行了浅拷贝，即定义了form的初始值。首先要知道，resetForm()方法不是将表单重置为空，而是重置为初始值，也就是表单第一次绑定的值。由于代码中是浅拷贝，导致一个改变，另一个也会跟随变化。引用类型直接赋值相当于共用一个地址，指向同一个堆内存，所以会跟着变。因此在resetForm方法执行时，form表单中的值变成了初始值，导致表单里的数据也变成了初始值，所以才会点哪一行都会变成第一次点击那行的数据。

拷贝

浅拷贝：新对象赋值，只是取的旧对象栈中的值，也就是引用对象的值。浅拷贝出的所有变量都只是指向了一处而已，故会互相干涉。
深拷贝：会在堆里边开辟一个空间，存放自己的对象值。深拷贝出的所有变量都会开辟自己的空间来存放自己的值，因此指向也各不相同，故不会互相干涉。

解决方法

//浅拷贝
this.planForm=this.List//原有赋值方式

//深拷贝
this.planForm=JSON.parse(JSON.stringify(this.List));//深拷贝方式

如果需要传递对象，也可以采用以下两种方式：

this.planForm={...this.object}
this.planForm=[...this.object]

或者使用Object.assign()方法，具体查看Object.assign()的方法定义。

Object.assign(params, { planForm: this.planForm, List: this.List})

 [1]: https://segmentfault.com/q/1010000022460233
 [2]: https://blog.csdn.net/m0_61387674/article/details/120561964