Vue 3: Ref vs Reactive

Hola amantes de Vue de todo el mundo. Bienvenidos a mi charla, Rev vs. Reactive. Qué elegir usando la API de composición de Vue 3. Mi nombre es Michael Hoffman. Soy un desarrollador front-end senior y freelancer de Múnich, Alemania. Estoy enfocado en Vue.js y dirijo un boletín semanal de Vue y soy muy activo en Twitter. Así que asegúrate de saludar allí. Comencemos.

Me encanta la API de composición de Vue 3, pero proporciona dos enfoques para agregar estado reactivo a los componentes de Vue. Puedes elegir Rev o Reactive. Puede ser engorroso usar .value en todas partes al usar Revs. Por otro lado, puedes perder fácilmente la reactividad al desestructurar objetos reactivos. Así que en esta charla, te explicaré cómo puedes elegir si usar Rev, Reactive o ambos. Primero, necesito explicar algunos conceptos básicos de la reactividad en Vue 3. Luego echamos un vistazo detallado a Reactive y Rev. Hacemos una comparación entre ambos. Y al final, hay una conclusión donde hablaré sobre mi opinión y las opiniones de la comunidad de Vue. Y te mostraré un patrón recomendado de cómo puedes agrupar Rev y Reactive.

Comencemos con la reactividad en Vue 3. ¿Qué es la reactividad y por qué la necesita Vue? Un sistema de reactividad es un mecanismo que mantiene automáticamente sincronizada una fuente de datos, nuestro modelo, con una representación de datos, nuestro Vue. Si el modelo cambia, el Vue se vuelve a renderizar para reflejar los cambios. Y este es un mecanismo crucial para cualquier marco web.

Pero JavaScript no es reactivo por defecto. Veamos un ejemplo de código. Aquí tenemos una variable price con el valor 10 y una variable quantity con el valor 2. Calculamos total multiplicando price y quantity. Si registramos total, obtenemos 20 como se esperaba. Pero, ¿qué pasa si ahora asignamos un nuevo valor a price, en este ejemplo, 20? Y si ahora registramos el resultado, total sigue siendo 20. En un sistema de reactividad, esperaríamos que el total se actualice cada vez que price o quantity cambien. Pero JavaScript generalmente no funciona así. Esa es la razón por la que el marco Vue tuvo que implementar otro mecanismo para rastrear la lectura y escritura de variables locales.

¿Cómo implementa Vue la reactividad? Funciona interceptando la lectura y escritura de propiedades de objetos. Por lo tanto, Vue 3 utiliza proxies para objetos reactivos y getter-setters para refs. Veamos los ejemplos de código simplificados, que ignoran muchos casos extremos y detalles. Tenemos una función reactive que recibe un objeto. Dentro de la función, devolvemos un nuevo objeto proxy basado en el objeto dado pasado a la función como argumento. El getter del objeto proxy recibe un mapa de destino, que almacena efectos, una forma abreviada de efectos secundarios, y estos son funciones que modifican el estado de la aplicación. La función track se utiliza para verificar si hay un efecto en ejecución actualmente, y luego el getter devuelve el efecto en el mapa de destino para la clave dada. El setter también recibe el mapa de destino, la clave, y el valor de nuestro efecto. La función trigger busca los efectos suscriptores para la propiedad y los invoca. No tienes que entender todos los detalles que están ocurriendo en este ejemplo de código, pero lo que debes recordar es que Vue 3 utiliza objetos para implementar la reactividad. Solo para tu información, Vue 2 utilizaba exclusivamente getter setters de objetos debido a limitaciones del navegador. Ahora veamos la función reactive. Devuelve un proxy reactivo del objeto proporcionado. Podemos importar reactive del paquete Vue y luego llamar a la función y pasar cualquier objeto como en nuestro ejemplo, count cero. Esto es el equivalente de vue.observable, que estaba disponible en la versión 2 de Vue. El estado creado con la función reactive es profundamente reactivo por defecto. Así que en este ejemplo, definimos un nuevo estado llamando a la función reactive.

Y pasamos el objeto, que contiene un count cero y un objeto anidado adicional que también contiene count cero. Definimos un watcher que observa nuestro estado y bloquea el estado cada vez que cambia. Así que mostrará correctamente el estado inicial. Pero, ¿qué pasa si ahora llamamos a un método increment que incrementa nuestro count anidado usando state.nested.count? Y si actualizamos este valor anidado, el watcher también se activa porque es profundamente reactivo por defecto.

Veamos algunas limitaciones de reactive. La API de reactive tiene dos limitaciones. La primera es que funciona exclusivamente con tipos de objeto como objetos, arrays o tipos de colección como map o set. Y no funciona con tipos primitivos como string, number o Boolean. La segunda limitación es que el objeto proxy devuelto por reactive no tiene la misma identidad que el objeto original. Así que definimos un objeto JavaScript simple. Llamamos a la función reactive y pasamos el objeto JavaScript simple. Y la función reactive devuelve un nuevo objeto proxy. Si ahora hacemos una comparación usando el operador de igualdad estricta entre el objeto proxy y el objeto JavaScript simple, el resultado será false, lo que significa que no tienen la misma identidad.

Tenemos un problema debido a la diferente identidad entre el proxy y el objeto original. Y ocurre si intentas desestructurar una propiedad de un objeto reactivo en una variable local. Tenemos un estado con count reactivo 0. Y si ahora intentas desestructurar count en una variable local, esto desconecta la reactividad de state.count. Así que si ahora intentas incrementar count, esto no afecta al estado original porque count es ahora un número simple y no activará ningún watcher, por ejemplo. Así que debes tener cuidado ahí. Afortunadamente, Vue proporciona una solución para eso, y esa es la función two refs. Tenemos, de nuevo, nuestro estado con count 0. Podemos importar two refs del paquete Vue. La función two refs acepta un argumento, y podemos pasar nuestro objeto proxy reactivo. Y luego, podemos desestructurar sus propiedades. Y la propiedad desestructurada es un ref, y mantiene la reactividad. Así que ten cuidado si intentas desestructurar objetos reactivos.

Hay un segundo problema debido a las diferentes identidades, y aparece si intentas reasignar un valor reactivo. Así que tenemos nuestro estado con count 0. Definimos un watcher para el estado, que bloquea nuestro estado inicial. Pero si ahora intentas reasignar un objeto reactivo completamente nuevo a nuestra variable de estado, esto no funciona porque la referencia ya no está siendo rastreada y nuestra conexión de reactividad se pierde.

Así que el watcher no se activará. Así que ten cuidado aquí. Esto también puede causar problemas complicados en tu aplicación.

Hay un tercer problema con la diferente identidad entre el proxy y el objeto original usando la función reactive. Y ocurre si intentas pasar una propiedad a una función.

Veamos nuestro estado con count 0. Y ahora queremos pasar el count accedido por state.count en una función útil. La función útil recibe el count, pero el count aquí es un número simple y ya no es reactivo. Así que ten cuidado aquí. Esto también puede causar errores complicados en tu código.

Pero Reactive es una buena opción para la migración de la API de composición porque Reactive funciona de manera muy similar a las propiedades reactivas dentro del campo data. Este es el código de nuestro componente de opciones API con el campo data que contiene un objeto con count 0 y name myCounter. Podemos simplemente copiar todo desde data a reactive para migrar este componente a la API de composición. Así que este es el mismo componente usando la API de composición. Y como puedes ver, puedes copiar y pegar el mismo objeto en la función reactive. Y eso es bastante útil para hacer una migración de la API de composición.

Ahora echemos un vistazo a la función ref. Y ref aborda las limitaciones de reactive. Ref no está limitado a tipos de objeto sino que puede contener cualquier tipo de valor. Así que podemos usarlo para valores primitivos como string, number, boolean. Pero también puede almacenar tipos de datos complejos como objetos, arrays, o incluso elementos del DOM.

Podemos importar ref del paquete view. Y luego podemos crear una variable reactiva usando la función ref. Y podemos pasar un primitivo como aquí en el número cero o un objeto como en este ejemplo count cero. Para leer y escribir las variables reactivas creadas con ref, necesitamos llamar a la propiedad dot value. Así que tenemos nuevamente nuestro count con ref cero. Si ahora registramos count, podemos ver que devuelve un objeto con valor cero. Así que para acceder al valor, necesitamos llamar a count.value. Para modificar la variable reactiva, también necesitamos llamar a count. Para modificar la variable reactiva, también necesitamos llamar a dot value. En este ejemplo, queremos establecer el count a dos. Así que tenemos que llamar a count.value y establecer su valor a dos. Si registras el resultado, podemos ver que el valor se actualiza correctamente a dos.

Echemos un vistazo a los internos de ref porque tal vez te preguntes, ¿cómo puede ref contener valores primitivos después de que hemos aprendido que el sistema de reactividad de view se basa en interceptar la lectura y escritura de objetos y un valor primitivo no es un objeto. Así que echemos un vistazo al código simplificado con fines de demostración que muestra cómo funciona ref internamente. Así que tenemos la función ref que recibe un valor, en este caso cualquier primitivo como string, Boolean, o number. Y dentro de la función ref, se crea un nuevo objeto que también se devuelve desde aquí. Y dentro del objeto, tenemos un getter y un setter. Y ambos utilizan las mismas funciones track y trigger que ya discutimos en la sección de reactividad. Lo que es bastante interesante es que ref utiliza reactive internamente si pasas tipos de objeto como arrays u objetos. Así que puedes, de una manera simplificada, llamar a ref con un objeto es casi lo mismo que llamar a ref con llamar a reactive y un objeto.

Hablemos sobre desestructurar un ref porque la reactividad también se pierde si intentas desestructurar un objeto reactivo creado con ref. Así que tenemos nuestro count con ref 0. Y si ahora intentamos desestructurar value de count, esto desconecta la reactividad. Y la variable count desestructurada sería un número simple en este ejemplo. Lo mismo ocurre si reasignas count.value a una nueva variable, en este ejemplo, count.value.

Esto también desconecta la reactividad, y count.value también sería un número simple. Así que también necesitas tener cuidado aquí. Una solución sería agrupar tus refs en un objeto JavaScript simple. Así que aquí tenemos state, que es un objeto JavaScript simple que contiene una propiedad con el valor ref uno, y otra propiedad name que contiene un ref con Michael. Y ahora puedes desestructurar count y name del objeto state, y ambos seguirán siendo reactivos porque ambos son refs.

Hablemos de pasar ref a funciones. Porque puedes hacer eso sin perder reactividad. Tenemos nuevamente nuestro ejemplo de state con un count ref uno y un name ref Michael, y ahora queremos pasar el count a use foo. Use foo recibe un argumento count, que es un ref y es completamente reactivo. Así que si recuerdas, esto ahora es completamente reactivo en comparación con reactive, al usar reactive donde la reactividad se perdió en el mismo ejemplo. Y esta capacidad es bastante importante ya que se usa frecuentemente cuando extraes tu lógica en composables.

Ahora intentemos reemplazar un objeto ref con una nueva referencia de objeto. En este ejemplo, hemos definido una nueva variable reactiva state llamando a ref con un objeto que contiene count uno y el name Michael. Ahora queremos reasignar un objeto completamente nuevo. En este ejemplo, llamamos a state.value y pasamos y referenciamos un nuevo objeto con count dos y name Chris. Y esto funciona usando ref y el state sigue siendo reactivo. Así que esta es una gran ventaja en comparación con usar reactive. En este capítulo, echamos un vistazo a desenvainar refs porque Vue nos ayuda a desenvainar refs sin llamar a .value en todas partes. Primero, Vue desenvaina automáticamente un ref cuando lo llamas en la plantilla. Así que aquí tenemos dentro del script setup, nuestro count con ref cero. Y en la plantilla, no necesitamos llamar a count.value porque Vue desenvaina automáticamente nuestro ref aquí. Lo mismo ocurre con las dependencias de watcher. Tenemos nuestro count con el ref cero. Y el primer argumento de la función watch con la dependencia del watcher. Y aquí no necesitamos llamar a .value porque Vue desenvaina automáticamente el ref por nosotros. Vue también proporciona una práctica función utilitaria llamada unwrap que es especialmente útil si nuestro valor podría ser un ref. Así que aquí tenemos dos variables, count, que es una variable reactiva creada con ref cero, y una variable local name que se asigna a la cadena Michael. Ahora importamos unwrap del paquete Vue y lo llamamos en nuestro count. Si registramos el resultado, podemos ver que desenvainó correctamente el ref. Si ahora llamamos a unwrap en nuestra variable no reactiva name, también funciona y registra el resultado correcto.

Y eso funciona porque unwrap es una función de azúcar ya que verifica si la variable es un ref. Y si es un ref, devuelve, llama a count.value. De lo contrario, simplemente devuelve el valor en sí. Si estás usando VSCode y la extensión Volar, puedes habilitar que automáticamente agregue .value a los refs. Esta es una configuración que puedes habilitar. Se llama autocomplete-refs. Está deshabilitado por defecto para reducir el uso de CPU.

Y puedes ver en este ejemplo, si presionas, si ingresas el nombre count, la extensión automáticamente agrega .value después del nombre de la variable, lo cual puede ser bastante útil.

Ahora hagamos una comparación entre reactive y ref. Ref puntúa ya que se puede usar con cualquier valor en comparación con reactive que solo se puede usar en tipos de objeto. Pero hay una desventaja al usar ref, y es porque los valores se acceden de manera diferente en script y template. Así que este es un punto a favor de reactive. Porque al usar ref dentro de la pestaña de script, necesitas llamar a .value. Pero Vue desenvuelve automáticamente el ref en el template así que no necesitas llamar a .value allí. Los objetos Ref pueden reasignarse, lo cual es un punto a favor de ref. Ref también puntúa porque las referencias se pueden pasar a través de funciones sin perder reactividad. También vimos que reactive pierde reactividad si intentamos desestructurar propiedades de objeto en variables locales. Pero hay una ventaja al usar reactive si intentas migrar a la API de composición porque es similar al objeto de datos de las herramientas de Vue.

Lleguemos a la conclusión. En mi opinión, prefiero ref. Y lo que más me gusta de ref es que sabes que es un valor reactivo si ves que su propiedad se accede a través de .value. Y no es tan fácil si los objetos se crean con reactive. Así que si ves esta línea de código en tu aplicación, no sabes si algún objeto es un objeto JavaScript simple o si es un objeto reactivo. Si ves esta línea dentro de tu aplicación, es bastante probable que cualquier ref sea un ref y se comporte de manera reactiva.

Hablemos de un patrón recomendado y es agrupar refs dentro de un objeto reactivo. Así que tenemos dos refs loading y error y los pasamos a un objeto reactivo que se asigna a una variable de estado local. Ahora podemos observar todo el objeto reactivo usando watch effect, pero también podemos definir observadores para los refs por separado. Y lo que es agradable de eso, si actualizamos el ref, por ejemplo, estableciendo el valor de loading en false, esto activa ambos observadores. Y si no necesitas la reactividad del objeto de estado, también puedes agruparlo en un objeto JavaScript simple. Agrupar refs resulta en un solo objeto que es más fácil de manejar, mantiene tu código organizado y de un vistazo, puedes ver que los refs agrupados pertenecen juntos y están de alguna manera relacionados.

Hablemos de las opiniones de la comunidad de Vue. Pregunté a mis seguidores de Twitter si están usando ref o reactive y más del 60% está usando ref, el 8% está usando reactive y el 22% está usando ambos, lo cual es bastante bueno. Y puedes ver que ref es el ganador aquí. El increíble Michael Thiessen también escribió un brillante artículo en profundidad sobre ref versus reactive. Y recopiló las opiniones de personas famosas de la comunidad de Vue, como Eduardo, el creador de PNA, Daniel Roux, el líder del equipo de Nux, Matt de Learnvue y muchos más.

Y en resumen, todos usan ref por defecto y reactive cuando necesitan agrupar cosas. Entonces, ¿deberías usar ref o reactive? Mi recomendación es usar ref por defecto y reactive cuando necesites agrupar cosas. La comunidad de Vue tiene la misma opinión. Pero está totalmente bien si decides usar reactive por defecto. Ref y reactive son ambas herramientas muy poderosas para crear variables reactivas en Vue 3. Puedes usar ambos sin ningún inconveniente técnico. Simplemente elige el que te guste y trata de mantener la consistencia en cómo escribes tu código.

Gracias por escuchar, y estoy feliz de responder tus preguntas.