Vue 中 JS 中的深拷贝与浅拷贝的区别？

在 JavaScript 中，深拷贝和浅拷贝是两种不同的对象复制方式，它们的区别在于复制的对象的层次和引用关系。

浅拷贝（Shallow Copy）：

• 浅拷贝只复制对象的第一层属性，如果属性值是对象，则复制的是对象的引用而不是对象本身。
• 原始对象和浅拷贝后的对象共享相同的内部对象引用，修改其中一个对象的内部对象会影响另一个对象。
• 常见的浅拷贝方法包括 Object.assign()、Array.slice()、Array.concat() 等。

示例：

const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObj);

shallowCopy.a = 3;
shallowCopy.b.c = 4;

console.log(originalObj); // { a: 1, b: { c: 4 } }

深拷贝（Deep Copy）：

• 深拷贝会递归地复制所有层级的对象和其属性，生成一个全新的对象，与原对象完全独立，互不影响。
• 深拷贝会创建一个新的对象及其内部的所有子对象的副本，原对象和深拷贝后的对象没有任何关联。
• 由于递归复制所有层级的属性，深拷贝可能会消耗更多的内存和时间。
• 实现深拷贝的方法有很多种，比较常见的是使用递归、JSON.parse(JSON.stringify())、第三方库如 lodash 的 _.cloneDeep() 方法等。

示例：

const originalObj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObj));

deepCopy.a = 3;
deepCopy.b.c = 4;

console.log(originalObj); // { a: 1, b: { c: 2 } }

总结来说，浅拷贝只复制第一层的对象属性，而深拷贝会递归复制所有层级的对象属性，生成一个全新且相互独立的对象。选择深拷贝还是浅拷贝取决于需求，需要注意深拷贝可能带来性能和内存消耗上的额外开销。