vue修改值与深度拷贝

介绍

深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。

关于为什么要用深度拷贝，如果要将可变对象和不可变对象相互转换，或者需要操作新对象的时候不影响原始对象，则用深度拷贝。copy-on-write原则就是利用深度拷贝来实现的。

场景

工作中前端使用vue框架，vue采用的是MVVM（双向数据绑定），即

View中数据变化将自动反映到Model上，反之，Model中数据变化也将会自动展示在页面上。
ViewModel就是View和Model的桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回到Model。

这就导致在数据进行修改时，就算将对象赋值给其他对象后，修改数据时会将所有对象对应的数据同样修改，但功能需要将数据分离开来。
产生这种情况的原因便是vue框架的MVVM技术，可以理解为java的只对地址进行了赋值，却没有重新生成新对象。

解决

出现这种情况时，可以使用深度拷贝功能。
JSON.parse(JSON.stringify(data))