// 基礎(chǔ)版深克?。╒ue中可直接使用，適配簡單數(shù)據(jù)）
function deepCloneBasic(obj) {
  // 處理null和非對象/數(shù)組類型（直接返回，無需克?。?
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  // 利用JSON序列化+反序列化實現(xiàn)深克隆
  return JSON.parse(JSON.stringify(obj));
}

// Vue中測試示例（普通數(shù)據(jù)）
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被轉(zhuǎn)為普通對象）
  if (obj instanceof Date) {
    return new Date(obj);
  }

  // 3. 處理RegExp類型（保留正則的修飾符）
  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }

  // 4. 處理數(shù)組和對象（區(qū)分?jǐn)?shù)組和普通對象）
  // 創(chuàng)建一個與原對象類型一致的空容器（數(shù)組→數(shù)組，對象→對象）
  const cloneObj = Array.isArray(obj) ? [] : {};

  // 5. 遞歸遍歷所有屬性，深度拷貝
  for (let key in obj) {
    // 只拷貝對象自身的屬性（排除原型鏈上的屬性）
    if (obj.hasOwnProperty(key)) {
      // 遞歸克隆子屬性（嵌套對象/數(shù)組）
      cloneObj[key] = deepClonePerfect(obj[key]);
    }
  }

  return cloneObj;
}

// Vue中測試示例（復(fù)雜數(shù)據(jù)）
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（函數(shù)正常克?。?

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

// Vue3專屬深克隆（保留響應(yīng)式）
function deepCloneVue3(obj) {
  // 處理ref對象：先獲取原始值，克隆后重新創(chuàng)建ref
  if (isRef(obj)) {
    const rawValue = toRaw(obj.value); // 轉(zhuǎn)為原始值（避免響應(yīng)式干擾）
    const cloneValue = deepClonePerfect(rawValue); // 用完善版克隆原始值
    return ref(cloneValue); // 重新創(chuàng)建ref，保留響應(yīng)式
  }

  // 處理reactive對象：先獲取原始值，克隆后重新創(chuàng)建reactive
  if (isReactive(obj)) {
    const rawObj = toRaw(obj); // 轉(zhuǎn)為原始對象
    const cloneObj = deepClonePerfect(rawObj); // 深度克隆
    return reactive(cloneObj); // 重新創(chuàng)建reactive，保留響應(yīng)式
  }

  // 非響應(yīng)式數(shù)據(jù)，直接用完善版克隆
  return deepClonePerfect(obj);
}

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

// 克隆響應(yīng)式數(shù)據(jù)
const cloneReactive = deepCloneVue3(reactiveObj);
const cloneRef = deepCloneVue3(refObj);

// 修改克隆對象，原對象不受影響，且克隆對象仍有響應(yīng)式
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（克隆對象響應(yīng)式正常）
</script>

// Vue2專屬深克隆（保留響應(yīng)式，需引入Vue）
import Vue from 'vue'

function deepCloneVue2(obj) {
  // 處理Vue2的響應(yīng)式對象（data中定義的對象、Vue.observable創(chuàng)建的對象）
  if (Vue.isReactive(obj) || Vue.isVue(obj)) {
    // 用Vue.extend創(chuàng)建臨時組件，通過props傳遞數(shù)據(jù)，實現(xiàn)響應(yīng)式克隆
    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);
  }

  // 非響應(yīng)式數(shù)據(jù)，用完善版克隆
  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]（克隆對象響應(yīng)式正常）