Sé que el título puede ser un poco complejo de entender (no sabía cómo decirlo de manera simple), así que aquí hay un ejemplo mínimo. Imagina que tengo un objeto reactivo ObjectA y trato de copiar uno si es propiedad:
const objectA = reactive({ name: "test" }) const objectB_01 = reactive({ name: a.name }) // lose reactivity const objectB_02 = reactive({ name: ref(a.name) }) // lose reactivity const objectB_03 = reactive({ get name() { return a.name } }) // keep reactivityCuando tengo una plantilla que se ve así:
<template> <div>{{ objectA.name }}</div> </template>Luego, el nombre es reactivo (es decir, si lo cambio en alguna parte, la plantilla se actualiza instantáneamente).
Pero no funciona objectB_01.name , ni objectB_02.name . Solo funciona con objectB_03.name , pero si lo encuentra un poco como una solución pirateada.
Mi pregunta es: ¿hay una forma adecuada de hacerlo? Quiero decir, usar un operador get funciona pero en realidad no es tan limpio, creo...
Por ejemplo API reactiva
reactive desenvolverá todas las referencias profundas, mientras mantiene la reactividad de referencia
const count = ref(1) const obj = reactive({ count }) // ref will be unwrapped console.log(obj.count === count.value) // true // it will update `obj.count` count.value++ console.log(count.value) // 2 console.log(obj.count) // 2 // it will also update `count` ref obj.count++ console.log(obj.count) // 3 console.log(count.value) // 3Deberías mirar más esto; https://v3.vuejs.org/api/basic-reactividad.html#reactive
Si desea que el valor sea reactivo tanto en el objeto A como en el objeto B, necesita una sola fuente del valor, por lo que los captadores y definidores son la única forma.
const objectB_03 = reactive({ get name() { return a.name }, set name(value) { a.name = value } }) // keep reactivityDe hecho, los datos de Vue2 hacen exactamente eso, consulte Cómo se rastrean los cambios
Cuando pasa un objeto de JavaScript simple a una instancia de Vue como su opción de datos, Vue recorrerá todas sus propiedades y las convertirá en captadores/establecedores.