浅拷贝和深拷贝AI
目录
浅拷贝和深拷贝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 提供了更强大且灵活的解决方案。
通过选择合适的方法，你可以确保在修改新对象时不会影响到原对象的数据。