vue踩坑 ：点击父表格的编辑弹窗更改数据，在更改的时候子表格数据也在实时变化（深拷贝和浅拷贝，拷贝引用地址问题）

问题如图：

在更改编辑弹窗里面的数据，表格的子表格数据会实时跟着变化。

原本代码：

// 修改航班
const editFlight = (record: any) => {
  flightStore.flightInfo = record // 点击弹窗获取当行数据
  modalTitle.value = 'Edit Flight'
  visible.value = true
}

原因：深拷贝和浅拷贝，拷贝引用地址问题

flightStore.flightInfo = record // 点击弹窗获取当行数据

这里直接赋值是拷贝引用地址，数据会互相影响。要想不互相影响应该在打开弹窗获取数据深拷贝后再赋值！！

解决方法: JSON.parse(JSON.stringify(record))

// 修改航班
const editFlight = (record: any) => {
  flightStore.flightInfo = JSON.parse(JSON.stringify(record)) // 深拷贝，不影响数据
  modalTitle.value = 'Edit Flight'
  visible.value = true
}

参考文献：blog.csdn.net/weixin_4317…

扩展：

因为这个踩坑，我实践过程使用了Object.assign()和 [...array] 这两种都没有得到解决。通过查询总结，Object.assign()拷贝的是属性值，假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。目标对象自身也会改变。（参考相关文献：blog.csdn.net/weixin_4329… ）

es6的展开语法：是深拷贝，源数据不会发生改变。但是！！！es6的展开语法只针对第一层，对多层还是浅拷贝方式。 所以拷贝对象里面如果还有对象，那么是浅拷贝。

深拷贝之 JSON.parse(JSON.stringify(待拷贝对象)) ：

1. 缺点：没法拷贝内部函数

let a = {
    name : '张三',
    age : '18',
    like(){
        console.log('喜欢唱歌、滑冰');
    }
}
let b =JSON.parse( JSON.stringify(a) );
b.name = '李四';
console.log('a：',a);
console.log('b：',b);

结果：在b对象中未出现like函数 2. JSON的parse和stringify方法

function deepClone(obj) {
  var _obj = JSON.stringify(obj) //  对象转成字符串
  var objClone = JSON.parse(_obj) //  字符串转成对象
  return objClone
}
var a = [0, 1, [2, 3], 4]
b = deepClone(a)
a[0] = 6
a[2][0] = 7
console.log(a) //  [6,1,[7,3],4]
console.log(b) //  [0,1,[2,3],4]

其他深拷贝，找到一个参考文章： blog.csdn.net/weixin_5774…