值传递和引用传递、深拷贝和浅拷贝

vue 把一个值赋给两个变量，修改一个变量时，另一个变量也会修改。

原因分析

this.a = res.data;
this.b = res.data;

同时给两个变量 a 和 b 赋值时，修改 a 的内容，打印 b 结果是一样的，因为这里的赋值是属于引用传递的，把 res.data 这个地址赋给 a 和 b，当修改 a 时，res.data 会同步变动，导致 b 也发生了改变。

这种赋值方式也被称为浅拷贝，当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

解决方案

this.a = JSON.parse(JSON.stringify(res.data));
this.b = JSON.parse(JSON.stringify(res.data));

使用 JSON.parse 和 JSON.stringify，将他变成一个常量值，这时再赋值给 a 和 b 的时候，就属于值传递了，这种赋值方式也叫做深拷贝，每个对象都对应一个新的空间，和其他对象互不影响。

• LinuxDo
• Giscus
• Twikoo