浅拷贝和深拷贝AI

在 Vue 3 中，当你希望复制一个对象并确保对新对象的修改不会影响到原对象时，可以使用多种方法来实现这一点。以下是所有常见的解决方法及其适用场景：

1. 浅拷贝

浅拷贝只复制对象的第一层属性，对于嵌套的对象或数组，仍然会引用原始对象中的内容。

使用结构赋值

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 3; // 这会影响到原对象中的 `b` 对象
console.log(original.b.c); // 输出 3

使用 Object.assign

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 3; // 这会影响到原对象中的 `b` 对象
console.log(original.b.c); // 输出 3

2. 深拷贝

深拷贝会递归地复制对象的所有层次，包括嵌套的对象和数组，生成一个完全独立的新对象。

使用 JSON.parse(JSON.stringify())

适用于简单的对象结构，但不支持函数、循环引用等复杂情况。

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3; // 不会影响到原对象
console.log(original.b.c); // 输出 2

使用 Lodash 的 cloneDeep

Lodash 提供了一个强大的工具函数来处理复杂的对象结构。
首先安装 Lodash：

npm install lodash

然后在代码中使用：

import _ from 'lodash';const original = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(original);
deepCopy.b.c = 3; // 不会影响到原对象
console.log(original.b.c); // 输出 2

使用递归函数手动实现深拷贝

如果你不想依赖外部库，也可以自己实现一个深拷贝函数。

function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}if (Array.isArray(obj)) {const arrCopy = [];for (let i = 0; i < obj.length; i++) {arrCopy[i] = deepClone(obj[i]);}return arrCopy;}const objCopy = {};for (const key in obj) {if (obj.hasOwnProperty(key)) {objCopy[key] = deepClone(obj[key]);}}return objCopy;
}const original = { a: 1, b: { c: 2 } };
const deepCopy = deepClone(original);
deepCopy.b.c = 3; // 不会影响到原对象
console.log(original.b.c); // 输出 2

3. 使用 Vue 3 的响应式系统相关工具

Vue 3 提供了一些工具函数来处理响应式数据，虽然它们的主要用途不是用于深拷贝，但在某些情况下可能会有所帮助。

使用 toRaw

获取响应式对象的原始对象。

import { reactive, toRaw } from 'vue';const original = reactive({ a: 1, b: { c: 2 } });
const rawOriginal = toRaw(original);
// 注意：toRaw 只是获取原始对象，并不创建副本

使用 markRaw

标记一个对象永远不应该被转换为响应式对象。

import { markRaw } from 'vue';const original = { a: 1, b: { c: 2 } };
const markedRaw = markRaw(original);
// 标记后，Vue 将不会尝试将这个对象变为响应式

4. 使用第三方库

除了 Lodash 之外，还有其他一些流行的第三方库可以帮助你进行深拷贝。

使用 structuredClone（现代浏览器支持）

这是 JavaScript 原生提供的一个方法，支持深拷贝，但需要注意浏览器兼容性。

const original = { a: 1, b: { c: 2 } };
const deepCopy = structuredClone(original);
deepCopy.b.c = 3; // 不会影响到原对象
console.log(original.b.c); // 输出 2

使用 immer

Immer 是一个用于处理不可变数据的库，特别适合处理复杂的状态管理。
首先安装 Immer：

npm install immer

然后在代码中使用：

import produce from 'immer';const original = { a: 1, b: { c: 2 } };
const deepCopy = produce(original, draft => {draft.b.c = 3;
});
console.log(original.b.c); // 输出 2
console.log(deepCopy.b.c); // 输出 3

总结

根据你的具体需求选择合适的拷贝方法：

• 浅拷贝：适合只需要复制对象的第一层属性的情况。
• 深拷贝：适合需要完整复制整个对象树的情况，推荐使用 Lodash 的 cloneDeep 或者自己实现递归函数。
• JSON.parse(JSON.stringify())：简单快捷，但不支持函数、循环引用等复杂情况。
• 第三方库：如 Lodash 和 Immer 提供了更强大且灵活的解决方案。

通过选择合适的方法，你可以确保在修改新对象时不会影响到原对象的数据。