无法在ref变量的值上使用构造克隆（）

Question

我想利用 structuredclone（） vue应用。我想使用它来创建一个深度克隆（而不是使用诸如Stringify和Parse或外部库之类的解决方法）。在我的设置功能中，以下代码很好

const a = {
  foo: {
    bar: "+"
  }
};
const b = structuredClone(a);

console.log(b);

但是我不可能在ref变量的值上使用它。此示例代码

import { ref } from "vue";
const a = ref({ foo: { bar: "+" } });
const b = structuredClone(a.value);

引发错误

未能达到的domexception：无法在“窗口”上执行“构造克隆”：＃无法克隆。

Ref数组中的项目也是如此

import { ref } from "vue";
const a = ref([{ foo: { bar: "+" } }]);
for (const b of a.value) {
  const c = structuredClone(b);
}

？

Answer 1

该错误意味着 structuredclone 是在 proxy 实例上执行的，无法克隆。为了允许，应该在原始对象上使用代理包装：

const b = structuredClone(toRaw(a.value));

请注意， toraw 在 a.value 上使用，因为这两个 a a 和 a.Value 是反应性对象， Toraw 工作浅，需要应用于最内向的对象。

由于 ref 和反应性允许构成反应性对象，因此 toraw 由于其工作方式而可能不起作用：

ref({ foo: { bar: barRef } })

这将需要递归地使用 Toraw 在使用 structuredClone 之前，在反应性对象上。在这一点上，这并不比手动克隆对象更容易，除非正在使用 set 等的更奇特的对象。

Answer 2

import {
  toRaw,
  isRef,
  isReactive,
  isProxy,
} from 'vue';

export function deepToRaw<T extends Record<string, any>>(sourceObj: T): T {
  const objectIterator = (input: any): any => {
    if (Array.isArray(input)) {
      return input.map((item) => objectIterator(item));
    } if (isRef(input) || isReactive(input) || isProxy(input)) {
      return objectIterator(toRaw(input));
    } if (input && typeof input === 'object') {
      return Object.keys(input).reduce((acc, key) => {
        acc[key as keyof typeof acc] = objectIterator(input[key]);
        return acc;
      }, {} as T);
    }
    return input;
  };

  return objectIterator(sourceObj);
}

hulkmaster

您也可以用这样的UNRE包裹源bj。
Objectiterator（UNREF（sourceObj）））