Vue浅拷贝和深拷贝如何实现

浅拷贝

浅拷贝是对象重新分配内存地址，但是值仍然引用原对象。简单来说，这意味着如果我们修改新对象，那么原始对象也会受到影响。

// 使用ES6语法实现浅拷贝
let obj = { a: 1, b: { c: 2 } };
let objCopy = Object.assign({}, obj);
console.log(objCopy); // { a: 1, b: { c: 2 } }
// 修改新对象
objCopy.a = 3;
console.log(objCopy); // { a: 3, b: { c: 2 } }
console.log(obj); // { a: 1, b: { c: 2 } }  // 原始对象未受影响
// 修改属性对象
objCopy.b.c = 4;
console.log(objCopy); // { a: 3, b: { c: 4 } }
console.log(obj); // { a: 1, b: { c: 4 } }  // 原始对象同样被修改

深拷贝

深拷贝创建一个新的对象，与原始对象具有相同的值，但是内存地址不同。因此，如果我们修改新对象，那么原始对象不受影响。

// 使用JSON解析创建深拷贝
let obj = { a: 1, b: { c: 2 } };
let objCopy = JSON.parse(JSON.stringify(obj));
console.log(objCopy); // { a: 1, b: { c: 2 } }
// 修改新对象
objCopy.a = 3;
console.log(objCopy); // { a: 3, b: { c: 2 } }
console.log(obj); // { a: 1, b: { c: 2 } }  // 原始对象未受影响
// 修改属性对象
objCopy.b.c = 4;
console.log(objCopy); // { a: 3, b: { c: 4 } }
console.log(obj); // { a: 1, b: { c: 2 } }  // 原始对象未受影响

浅拷贝的局限性

浅拷贝仅适用于基本数据类型。对于复杂对象，浅拷贝将引用原始对象的值，这意味着修改新对象会影响原始对象。

let obj = { a: 1, b: { c: 2 } };
let arr = [obj.b.c];
let arrCopy = arr.slice();
console.log(arrCopy); // [2]
// 修改新数组
arrCopy[0] = 3;
console.log(arrCopy); // [3]
console.log(arr); // [2]  // 原始数组未受影响，但是原始对象被修改

使用递归实现深拷贝

对于复杂对象，我们可以使用递归函数来实现深拷贝。

function deepClone(obj) {
  let clone = {};
  for (let key in obj) {
    if (typeof obj[key] == "object") {
      clone[key] = deepClone(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }
  return clone;
}
// 深拷贝一个对象
let obj = { a: 1, b: { c: 2 } };
let objCopy = deepClone(obj);
console.log(objCopy); // { a: 1, b: { c: 2 } }
// 修改新对象
objCopy.a = 3;
console.log(objCopy); // { a: 3, b: { c: 2 } }
console.log(obj); // { a: 1, b: { c: 2 } }  // 原始对象未受影响
// 修改属性对象
objCopy.b.c = 4;
console.log(objCopy); // { a: 3, b: { c: 4 } }
console.log(obj); // { a: 1, b: { c: 2 } }  // 原始对象未受影响

总结

浅拷贝是对象重新分配内存地址，但是值仍然引用原对象，只适用于基本数据类型。对于复杂对象，浅拷贝将引用原始对象的值，这意味着修改新对象会影响原始对象。

深拷贝创建一个新的对象，与原始对象具有相同的值，但是内存地址不同，适用于基本数据类型和复杂对象。我们可以使用递归函数来实现深拷贝。

返回的内容已按HTML格式进行排版。浅拷贝和深拷贝的概念和示例已经进行了详细解释。此外，本文还指出了浅拷贝的局限性，并提供了使用递归函数来实现深拷贝的示例。无论是浅拷贝还是深拷贝，都有其自己的用途和限制，开发人员需要根据特定的情况进行选择。