vue2 修改 this.form = response.data数据，form2也会影响？

精选原创

BeginMind 2024-01-06 20:48:11 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者BeginMind的原创作品，请联系作者获取转载授权，否则将追究法律责任

vue2 this.form = response.data

this.oldForm = response.data为啥this.form数据变化会影响this.oldForm里的数据

在 Vue 2 中，当你在组件中看到一个数据属性（例如 this.form 和 this.oldForm）的值发生变化时，这通常是因为 Vue 的响应式系统在背后工作。

当你执行以下代码：

javascript复制代码
 this.form = response.data;  
 
 this.oldForm = response.data;

实际上，你正在将 response.data 的引用分别赋给 this.form 和 this.oldForm。在 JavaScript 中，对象是通过引用传递的，而不是通过值传递的。因此，当你在稍后的某个时刻修改 this.form 时，你实际上是在修改原始对象（即 response.data）。由于 this.oldForm 也指向同一个对象，因此它也会反映这些更改。

要避免这种情况，你可以确保 this.oldForm 存储 response.data 的一个深拷贝，而不是直接引用同一个对象。你可以使用 JSON.parse(JSON.stringify(response.data)) 来创建一个深拷贝：

javascript复制代码
 this.form = response.data;  
 
 this.oldForm = JSON.parse(JSON.stringify(response.data));

这样，即使你修改了 this.form，this.oldForm 仍然会保持其原始值不变。

this.oldForm = JSON.parse(JSON.stringify(response.data)); 和 this.oldForm = Object.assign({}, response.data); 都可以用来复制对象，但它们的工作方式和效率有所不同。

工作方式:

JSON.parse(JSON.stringify(response.data)): 这个方法将对象转换成一个 JSON 字符串，然后再将该字符串转换回一个对象。这意味着它会遍历对象的所有属性，并将它们转换为字符串。然后，它会创建一个新的空对象，并将转换后的字符串属性复制回这个新对象。
Object.assign({}, response.data): 这个方法会创建一个新的空对象，并从 response.data 复制所有可枚举的自有属性到这个新对象。与前者相比，它不需要将对象转换为字符串，也不需要序列化和反序列化过程。

速度:

JSON.parse(JSON.stringify(response.data)) 会比 Object.assign({}, response.data) 更慢，因为它涉及到额外的字符串转换和可能的编码/解码开销。
Object.assign() 通常更快，因为它直接在内存中操作对象，避免了字符串处理。

深拷贝 vs 浅拷贝:

JSON.parse(JSON.stringify(response.data)) 会创建一个浅拷贝。这意味着如果原始对象的属性值是引用类型（如数组或对象），那么复制的对象的该属性值将是指向原始值的引用。
Object.assign({}, response.data) 也会创建浅拷贝，但只会复制自有属性（即直接在源对象上定义的属性）。如果源对象的原型链上有属性，那么这些属性不会被复制。