Vue深克隆实现方案：基础版JSON、完善版递归和响应式专属克隆

脚本专家

在Vue开发中，深克隆用于复制响应式数据，确保修改副本不影响原对象，同时不丢失响应式特性。本文从浅克隆与深克隆的区别入手，介绍三种实用方案，覆盖简单数据、复杂数据类型和Vue响应式对象。

一、浅克隆与深克隆的核心区别

浅克隆只复制对象的第一层属性，嵌套对象仍共享引用。例如Object.assign()和扩展运算符（...）均为浅克隆。深克隆递归复制所有层级，副本与原对象完全独立。在Vue中，直接克隆reactive或ref对象会丢失响应式，需要特殊处理。

二、方案1：基础版深克隆（JSON序列化）

适用于不包含函数、Date、RegExp、undefined等复杂类型的普通对象和数组。利用JSON.stringify()序列化再JSON.parse()反序列化，代码极简。

2. function deepCloneBasic(obj) {
3.   if (obj === null || typeof obj !== 'object') {
4.     return obj;
5.   }
6.   return JSON.parse(JSON.stringify(obj));
7. }

复制代码

测试示例：

2. const obj = { name: 'Vue', info: { version: '3.4.21' }, list: [1, 2, 3] };
3. const cloneObj = deepCloneBasic(obj);
4. cloneObj.info.version = '3.5.0';
5. cloneObj.list.push(4);
6. console.log(obj.info.version); // 3.4.21
7. console.log(obj.list); // [1,2,3]

复制代码

优点：简单直接；缺点：无法处理函数、Date、RegExp、Symbol等类型，会丢失或变形。

三、方案2：完善版深克隆（递归处理所有数据类型）

比基础版更通用，递归遍历对象，对Date、RegExp等特殊类型分别创建新实例，并区分数组和普通对象。

2. function deepClonePerfect(obj) {
3.   if (obj === null || typeof obj !== 'object') {
4.     return obj;
5.   }
6.   if (obj instanceof Date) {
7.     return new Date(obj);
8.   }
9.   if (obj instanceof RegExp) {
10.     return new RegExp(obj.source, obj.flags);
11.   }
12.   const cloneObj = Array.isArray(obj) ? [] : {};
13.   for (let key in obj) {
14.     if (obj.hasOwnProperty(key)) {
15.       cloneObj[key] = deepClonePerfect(obj[key]);
16.     }
17.   }
18.   return cloneObj;
19. }

复制代码

测试复杂数据：

2. const complexObj = {
3.   name: '深克隆',
4.   date: new Date(),
5.   reg: /vue/g,
6.   func: () => console.log('vue'),
7.   info: { a: 1, b: { c: 2 } },
8.   list: [1, [2, 3]]
9. };
10. const cloneComplex = deepClonePerfect(complexObj);
11. cloneComplex.info.b.c = 100;
12. cloneComplex.list[1].push(4);
13. cloneComplex.date.setFullYear(2025);
14. console.log(complexObj.info.b.c); // 2
15. console.log(complexObj.list[1]); // [2,3]
16. console.log(complexObj.date.getFullYear()); // 2024

复制代码

优点：克隆彻底，所有类型无误；缺点：代码稍长，但无外部依赖。

四、方案3：Vue专属深克隆（保留响应式）

针对Vue2和Vue3的响应式数据（ref、reactive、observable），克隆后重新创建响应式对象，避免丢失响应式特性。

Vue3 专属实现：

2. import { ref, reactive, isRef, isReactive, toRaw } from 'vue'
4. function deepCloneVue3(obj) {
5.   if (isRef(obj)) {
6.     const rawValue = toRaw(obj.value);
7.     const cloneValue = deepClonePerfect(rawValue);
8.     return ref(cloneValue);
9.   }
10.   if (isReactive(obj)) {
11.     const rawObj = toRaw(obj);
12.     const cloneObj = deepClonePerfect(rawObj);
13.     return reactive(cloneObj);
14.   }
15.   return deepClonePerfect(obj);
16. }

复制代码

测试：

2. const reactiveObj = reactive({ name: 'Vue3', info: { age: 5 } });
3. const refObj = ref({ a: 1, b: [2, 3] });
4. const cloneReactive = deepCloneVue3(reactiveObj);
5. const cloneRef = deepCloneVue3(refObj);
6. cloneReactive.info.age = 10;
7. cloneRef.value.b.push(4);
8. console.log(reactiveObj.info.age); // 5
9. console.log(refObj.value.b); // [2,3]

复制代码

Vue2 专属实现：

2. import Vue from 'vue'
4. function deepCloneVue2(obj) {
5.   if (Vue.isReactive(obj) || Vue.isVue(obj)) {
6.     const TempComponent = Vue.extend({
7.       props: Object.keys(obj),
8.       render: function() {}
9.     });
10.     const instance = new TempComponent({ propsData: obj });
11.     return instance._props;
12.   }
13.   if (obj && obj._isRef) {
14.     const cloneValue = deepClonePerfect(obj.value);
15.     return Vue.ref(cloneValue);
16.   }
17.   return deepClonePerfect(obj);
18. }

复制代码

测试：

2. const vue2Reactive = Vue.observable({ name: 'Vue2', list: [1, 2] });
3. const cloneVue2 = deepCloneVue2(vue2Reactive);
4. cloneVue2.list.push(3);
5. console.log(vue2Reactive.list); // [1,2]
6. console.log(cloneVue2.list); // [1,2,3]

复制代码

优点：克隆后的数据仍具备响应式；缺点：依赖Vue版本，需区分Vue2和Vue3写法。

五、注意事项

- 不要用JSON方案克隆响应式数据，会丢失响应式。
- Vue3中克隆reactive对象前需用toRaw()转为原始对象，避免代理干扰。
- 避免克隆Vue组件实例、Vuex状态等特殊对象，可能引发异常。
- 频繁使用时建议封装为全局工具函数（如utils/clone.js）。
- 简单场景用方案1，复杂非响应式数据用方案2，响应式数据用方案3。

六、总结与选择建议

- 普通对象/数组无复杂类型：方案1（JSON序列化），简洁高效。
- 所有数据类型（非响应式）：方案2（递归完善版），克隆彻底。
- Vue响应式数据（ref/reactive/observable）：方案3（Vue专属版），保留响应式。

实际开发中可组合方案2和方案3，封装后按需调用，提升代码复用性。

热心网友2

感谢楼主总结得这么清楚！平时做深克隆确实经常纠结该用哪种，JSON 那版最省事但坑也不少，递归版虽然稳但遇上循环引用会爆栈。楼主有没有遇到过特别大或者嵌套特别深的对象？如果用递归版，有没有考虑加个缓存来处理循环引用，或者限制递归深度防止性能崩掉？另外 Vue 专属的 toRaw 加 deepClonePerfect 那招很实用，不过如果对象里混着 ref 和 reactive 嵌套，用 isRef/isReactive 判断会不会漏掉一些代理对象？希望听听楼主的进一步建议。