Ref vs Reactive

Aprender la API de Composición de Vue 3 es algo que debes tienes que hacer para sacar el mayor partido a Vue. Sin embargo, una de las primeras dudas que te asaltarán es qué diferencia hay entre ref y reactive a la hora de declarar valores reactivos.

¿Cuándo usar reactive?

Si vienes de la Options API, la mejor forma para entender la función reactive es que la veas como el equivalente al objeto data.

Cuando creamos un objeto reactivo, Vue genera un Proxy del mismo para controlar las operaciones en sus propiedades ( intercepta get y set). Esto es importante por varios motivos.

1. Solo podemos guardar valores compuestos con reactive. Por ejemplo objetos, arrays, maps, sets, etc). Dicho de otra forma: NO puedes usar reactive con valores primitivos.
2. No es posible cambiar la referencia de un objeto reactivo (o pasar una de sus propiedades como parámetro) sin perder la reactividad. Por ejemplo, no podemos usar desestructuración sin más.

import { reactive } from "vue"

const user = reactive({ name: "Juan", city: "Valencia" })

let { name } = user // ❌ name no es reactivo

name += " Andrés" // ❌ no afecta a user.name

    

Si queremos desestructurar valores de un objeto reactivo y hacer que estos también lo sean, podemos usar los helpers toRef y toRefs.

import { toRefs } from "vue"

let { name } = toRefs(user) // ✅ name es reactivo

    

Resumiendo:

Usa reactive cuando tengas una colección de valores y esta deba ser reactiva. Por ejemplo un objeto con la información de un usuario, metadatos o los campos de un formulario. Eso sí, recuerda que debes ceñirte a valores compuestos y asegurarte de guardar siempre la referencia al objeto original para no perder reactividad.

¿Cuándo usar ref?

Vue provee la función ref y esta puede guardar en su interior cualquier valor (no solo primitivos, como muchos pensamos al comenzar a trabajar con Vue 3). Esto hace que ref sea más polivalente que reactive.

La función ref crea un objeto que envuelve el valor reactivo, así que —importante— para acceder al valor debes usar la propiedad value.

import { ref } from "vue"

const myName = ref("Juan")

myName += " Andrés" // 🖕

myName.value += " Andrés" // ✅

    

Sin embargo esto no es necesario (usar value) si accedemos a la referencia reactiva dentro del template de un componente .

<h1>{{ myName }}</h1>

    

Otra diferencia con reactive es que con ref puedes reemplazar la referencia de un objeto sin perder la reactividad. De hecho, si creamos un objeto reactivo con ref, en realidad estaremos usando reactive.

import { ref } from "vue"

const user = { name: ref("Juan"), city: ref("Valencia") };

let { name } = user; // ✅ name es reactivo

name.value += " Andrés"; // ✅ afecta a user.name

    

Resumiendo:

Usa ref cuando quieras tener piezas de estado más pequeñas que deban ser reactivas. Por ejemplo un flag que indique si hay auth o no (ej: isAuth), el nombre del usuario conectado o el total a pagar de un carrito de la compra. Ten en cuenta que aunque ref es más polivalente tendrás que usar value ( igual pronto ya no es así) y si lo utilizas con un objeto… al final estás usando reactive, con todo lo que conlleva.