He visto un patrón de uso de accesorios en CompositionAPI con mucha frecuencia, es decir, usar toRefs para hacer todas las entradas de props ref . Estoy un poco confundido por eso.
Por ejemplo, de la guía oficial de Vue 3:
export default { props: { user: { type: String, required: true } }, setup(props) { const { user } = toRefs(props) //... use user's value } }Tengo 2 preguntas en 2 escenarios:
cuando props.user ya es reactivo
Su valor cambiará si se modifica en algún ancestro, entonces, ¿por qué necesitamos usar toRefs ? ¿No es ya reactivo?
si no es reactivo, es solo un valor de cadena primitivo
¿Hacerlo reactivo significa que vamos a cambiar su valor? Creo que hacer que un objeto sea reactivo también implica que se agradece cambiar su valor. Pero todas las guías y linters nos advierten que es mejor no cambiar el valor de los accesorios (por no escribir en el valor calculado o algo así)
Si puedo cambiar el valor de los accesorios directamente en el componente, ya no necesito emitir los cambios al componente principal cada vez. Es muy conveniente, pero no sé cuándo es una buena idea cambiar el valor de los accesorios después de que estemos seguros de que se vuelve reactivo.
Dado que se supone que los accesorios no deben mutar, esto es útil para un caso específico que se explica en la documentación ; una referencia que se calcula a partir de una propiedad debe pasarse como argumento:
const { user } = toRefs(props) // or // const user = computed(() => props.user) someFunction(user);Cuando una función hace uso de la API de composición o simplemente necesita que se pase un argumento por referencia en lugar de por valor debido a la forma en que funciona, por ejemplo:
function someFunction(val) { setTimeout(() => { console.log('Up-to-date value:', unref(val)); }, 1000); }