当前位置：首页 > news >正文

浅拷贝和深拷贝AI

news 来源：原创 2025/5/2 0:32:27

值传递，在vue3中深拷贝的解决方法

- - 1. 浅拷贝
  - - 使用结构赋值
    - 使用 `Object.assign`
  - 2. 深拷贝
  - - 使用 `JSON.parse(JSON.stringify())`
    - 使用 Lodash 的 `cloneDeep`
    - 使用递归函数手动实现深拷贝
  - 3. 使用 Vue 3 的响应式系统相关工具
  - - 使用 `toRaw`
    - 使用 `markRaw`
  - 4. 使用第三方库
  - - 使用 `structuredClone`（现代浏览器支持）
    - 使用 `immer`
  - 总结

在 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