Quiero hacer uso de la funciónstructuredClone() dentro de mi aplicación Vue. Quiero usar esto para crear un clon profundo (en lugar de usar soluciones como stringify y parse o bibliotecas externas). Dentro de mi función de configuración, el siguiente código está bien
const a = { foo: { bar: "+" } }; const b = structuredClone(a); console.log(b);Pero no me es posible usarlo en valores de variables ref. Este código de ejemplo
import { ref } from "vue"; const a = ref({ foo: { bar: "+" } }); const b = structuredClone(a.value);lanza el error
DOMException no detectada: no se pudo ejecutar 'structuredClone' en 'Ventana': # no se pudo clonar.
Lo mismo ocurre con los elementos de las matrices de referencia.
import { ref } from "vue"; const a = ref([{ foo: { bar: "+" } }]); for (const b of a.value) { const c = structuredClone(b); }¿Cómo se puede arreglar esto?
El error significa que se ejecutó un clon structuredClone en la instancia de Proxy , que no se puede clonar . Para permitir esto, debe usarse en un objeto sin procesar que envuelve un proxy:
const b = structuredClone(toRaw(a.value)); Tenga en cuenta que toRaw se usa en a.value porque tanto a como a.value son objetos reactivos, y toRaw funciona superficialmente y debe aplicarse al objeto más interno.
Dado que ref y reactive permiten componer objetos reactivos, es posible que toRaw aún no funcione para ellos debido a cómo funciona:
ref({ foo: { bar: barRef } }) Esto requeriría usar recursivamente toRaw en objetos reactivos antes de structuredClone . En este punto, esto no hace que sea más fácil que clonar los objetos manualmente, a menos que se estén usando objetos más exóticos como Set , Map , etc.