Vue数据操作：如何在对象拷贝中正确选择深拷贝或浅拷贝？

场景复现：我们在对一个表单进行编辑时候，编辑完内容，并没有保存的时候，点击关闭，这个时候我们的表单的该字段也随着我们的编辑而改变了，但是这个值并没有被真正被保存到数据库。

然而会出现下面这种情况：

 随着我们刷新页面这条数据会正常显示。但是这也算是一个bug。

bug发生的原因：

 我们在编辑表单的时候，直接将row对象复制给了弹窗需要的对象，这个时候这俩个对象任意一个的属性内容发生改变的话，另一个也会伴随着变化。这是因为两个对象引用了同一个对象。

这就是所谓的浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存 

深拷贝：创造一个一模一样的对象，修改对象不会影响到原对象.

用lodash实现深拷贝

引入lodash.js文件。

import _ from '@/utils/lodash'; //引入
this.ruleForm = _.cloneDeep(row);  //深拷贝