Vue中深克隆的3种实现方案

// 基础版深克隆（Vue中可直接使用，适配简单数据）
function deepCloneBasic(obj) {
  // 处理null和非对象/数组类型（直接返回，无需克隆）
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  // 利用JSON序列化+反序列化实现深克隆
  return JSON.parse(JSON.stringify(obj));
}

// Vue中测试示例（普通数据）
const obj = { name: 'Vue', info: { version: '3.4.21' }, list: [1, 2, 3] };
const cloneObj = deepCloneBasic(obj);

// 修改拷贝对象，原对象不受影响
cloneObj.info.version = '3.5.0';
cloneObj.list.push(4);
console.log(obj.info.version); // 3.4.21（原对象不变）
console.log(obj.list); // [1,2,3]（原对象不变）

// 完善版深克隆（适配所有类型，Vue通用）
function deepClonePerfect(obj) {
  // 1. 处理null和非对象类型（直接返回）
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // 2. 处理Date类型（避免Date被转为普通对象）
  if (obj instanceof Date) {
    return new Date(obj);
  }

  // 3. 处理RegExp类型（保留正则的修饰符）
  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }

  // 4. 处理数组和对象（区分数组和普通对象）
  // 创建一个与原对象类型一致的空容器（数组→数组，对象→对象）
  const cloneObj = Array.isArray(obj) ? [] : {};

  // 5. 递归遍历所有属性，深度拷贝
  for (let key in obj) {
    // 只拷贝对象自身的属性（排除原型链上的属性）
    if (obj.hasOwnProperty(key)) {
      // 递归克隆子属性（嵌套对象/数组）
      cloneObj[key] = deepClonePerfect(obj[key]);
    }
  }

  return cloneObj;
}

// Vue中测试示例（复杂数据）
const complexObj = {
  name: '深克隆',
  date: new Date(),
  reg: /vue/g,
  func: () => console.log('vue'),
  info: { a: 1, b: { c: 2 } },
  list: [1, [2, 3]]
};

const cloneComplex = deepClonePerfect(complexObj);
cloneComplex.info.b.c = 100;
cloneComplex.list[1].push(4);
cloneComplex.date.setFullYear(2025);

console.log(complexObj.info.b.c); // 2（原对象不变）
console.log(complexObj.list[1]); // [2,3]（原对象不变）
console.log(complexObj.date.getFullYear()); // 2024（原对象不变）
console.log(cloneComplex.func()); // vue（函数正常克隆）

<script setup>
import { ref, reactive, isRef, isReactive, toRaw } from 'vue'

// Vue3专属深克隆（保留响应式）
function deepCloneVue3(obj) {
  // 处理ref对象：先获取原始值，克隆后重新创建ref
  if (isRef(obj)) {
    const rawValue = toRaw(obj.value); // 转为原始值（避免响应式干扰）
    const cloneValue = deepClonePerfect(rawValue); // 用完善版克隆原始值
    return ref(cloneValue); // 重新创建ref，保留响应式
  }

  // 处理reactive对象：先获取原始值，克隆后重新创建reactive
  if (isReactive(obj)) {
    const rawObj = toRaw(obj); // 转为原始对象
    const cloneObj = deepClonePerfect(rawObj); // 深度克隆
    return reactive(cloneObj); // 重新创建reactive，保留响应式
  }

  // 非响应式数据，直接用完善版克隆
  return deepClonePerfect(obj);
}

// 测试示例
const reactiveObj = reactive({ name: 'Vue3', info: { age: 5 } });
const refObj = ref({ a: 1, b: [2, 3] });

// 克隆响应式数据
const cloneReactive = deepCloneVue3(reactiveObj);
const cloneRef = deepCloneVue3(refObj);

// 修改克隆对象，原对象不受影响，且克隆对象仍有响应式
cloneReactive.info.age = 10;
cloneRef.value.b.push(4);

console.log(reactiveObj.info.age); // 5（原对象不变）
console.log(refObj.value.b); // [2,3]（原对象不变）
console.log(cloneReactive.info.age); // 10（克隆对象响应式正常）
</script>

// Vue2专属深克隆（保留响应式，需引入Vue）
import Vue from 'vue'

function deepCloneVue2(obj) {
  // 处理Vue2的响应式对象（data中定义的对象、Vue.observable创建的对象）
  if (Vue.isReactive(obj) || Vue.isVue(obj)) {
    // 用Vue.extend创建临时组件，通过props传递数据，实现响应式克隆
    const TempComponent = Vue.extend({
      props: Object.keys(obj),
      render: function() {}
    });
    const instance = new TempComponent({ propsData: obj });
    return instance._props;
  }

  // 处理ref对象（Vue2的ref需通过.value访问）
  if (obj && obj._isRef) {
    const cloneValue = deepClonePerfect(obj.value);
    return Vue.ref(cloneValue);
  }

  // 非响应式数据，用完善版克隆
  return deepClonePerfect(obj);
}

// 测试示例（Vue2）
const vue2Reactive = Vue.observable({ name: 'Vue2', list: [1, 2] });
const cloneVue2 = deepCloneVue2(vue2Reactive);
cloneVue2.list.push(3);
console.log(vue2Reactive.list); // [1,2]（原对象不变）
console.log(cloneVue2.list); // [1,2,3]（克隆对象响应式正常）