vue对象深拷贝、浅拷贝(对象之间的=赋值会存在浅拷贝)

vue对象深拷贝、浅拷贝

浅拷贝： 将A对象赋值给B对象，修改B对象的属性和方法会影响到A对象的属性和方法。
深拷贝： 将A对象赋值给B对象，修改B对象的属性和方法不会影响到A对象的属性和方法。

原因：复杂类型的赋值是浅拷贝，直接赋值 会导致双向修改

解决的方法：将浅拷贝转换成深拷贝

解决思路：先把该对象转成字符串(普通数据类型), 就没有引用类型的影响了。再转回对象使用。

JSON.parse(JSON.stringify(obj))
满足一般使用场景，但无法实现对象中方法(fountion)的深拷贝
let obj = {
    id: 1,
    name: '张三',
    age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

例子：

1、对象直接复制：（等同于浅拷贝）有问题会改变原数组

  const arryNew = props.analyconfigdata.bselectoptions;//属于浅拷贝，会修改原对象值
  console.error(props.analyconfigdata.bselectoptions, "执行前");
  for (var i = 0; i < props.analyconfigdata.config.length; i++) {
    let arryNewitem = [];
    for (var j = 0; j < props.analyconfigdata.bselectoptions.length; j++) {
      const aitem = arryNew[j]; //属于浅拷贝，会修改原对象值
      arryNewitem.push(aitem);
      aitem["checked" + i + j] = false;
      bseatValue.value[i].push(aitem);
    }
    bseatValue.value[i]["checkAll"] = true;
  }
  console.error(bseatValue.value);
  console.error(props.analyconfigdata.bselectoptions, "执行后");

2、转换为深拷贝然后对象赋值后

 const arryNew = JSON.parse(JSON.stringify(props.analyconfigdata.bselectoptions));
  console.error(props.analyconfigdata.bselectoptions, "执行前");
  for (var i = 0; i < props.analyconfigdata.config.length; i++) {
    let arryNewitem = [];
    for (var j = 0; j < props.analyconfigdata.bselectoptions.length; j++) {
      const aitem = JSON.parse(JSON.stringify(arryNew[j]));
      arryNewitem.push(aitem);
      aitem["checked" + i + j] = false;
      bseatValue.value[i].push(aitem);
    }
    bseatValue.value[i]["checkAll"] = true;
  }
  console.error(bseatValue.value);
  console.error(props.analyconfigdata.bselectoptions, "执行后");

参考文献：https://blog.csdn.net/weixin_51747462/article/details/128766770