VUE中深拷贝的应用场景

2020-07-18 10:07:16 执剑追风 78 前端开发 / VUE

在进行数据动态操作时,需要进行深拷贝

深拷贝与浅拷贝在应用中碰到的坑


图1


需求说明:

当用户点击 “复制场次” 按钮时,需要以该场次为模板,复制一个新场次,完成情况如图2


图2


这时侯,用户点击了 ”删除“ 第二场中,第一行数据,如果是采用浅拷贝( 直接赋值的方式 this.items.push(this.items[0]) ),那么第一场中,第一行也将会被删除(这不是我们想要的结果!)。

(浅拷贝:只是2个指针指向内存同一区域,当内存发生变化时,指向此区域指针同步变化)


解决方法是采用深拷贝(将被拷贝对象封装成JSON进行拷贝)

this.items.push(JSON.parse(JSON.stringify(this.items[0])))

这时侯,点击”删除“ 则第一场中数据不会受影响

(深拷贝:2个指针分别指向2个内存区域,不受另一个操作影响)