场景复现:我们在对一个表单进行编辑时候,编辑完内容,并没有保存的时候,点击关闭,这个时候我们的表单的该字段也随着我们的编辑而改变了,但是这个值并没有被真正被保存到数据库。
然而会出现下面这种情况:
随着我们刷新页面这条数据会正常显示。但是这也算是一个bug。
bug发生的原因:
我们在编辑表单的时候,直接将row对象复制给了弹窗需要的对象,这个时候这俩个对象任意一个的属性内容发生改变的话,另一个也会伴随着变化。这是因为两个对象引用了同一个对象。
这就是所谓的浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存
深拷贝:创造一个一模一样的对象,修改对象不会影响到原对象.
用lodash实现深拷贝
引入lodash.js文件。
1. import _ from '@/utils/lodash'; //引入 2. this.ruleForm = _.cloneDeep(row); //深拷贝