Qué es y cómo funciona la reactividad con Ref y Reactive en Vue.js

En este tutorial de Vue.js vamos a ver cómo funciona la reactividad a través de las funciones ref y reactive.

La reactividad es un paradigma de programación que nos permite que los cambios en los datos se reflejen automáticamente en la interfaz de usuario, creando una conexión entre los datos y el UI.

Es decir, cuando modificas una propiedad reactiva, Vue detectará automáticamente ese cambio y actualizará cualquier parte de la interfaz que dependa de esa propiedad.

La reactividad es uno de los pilares fundamentales de cualquier framework moderno. En Vue 3, se maneja principalmente a través de dos funciones

Ambas nos permiten crear datos reactivos, pero se utilizan en diferentes contextos. Vamos a verlas en detalle

Reactividad de valores primitivos con ref

La función ref() nos permite crear referencias reactivas a valores primitivos como strings, números o booleanos (aunque también puede contener objetos)

La sintaxis básica de ref es la siguiente:

import { ref } from 'vue';

const count = ref(0); // Crear una referencia reactiva con valor inicial 0

Cuando creamos una variable con ref(), Vue envuelve el valor en un objeto en una propiedad .value. Así que para acceder o modificar este valor, debemos usar esta propiedad:

// Acceder al valor
console.log(contador.value) // 0

// Modificar el valor
contador.value++
console.log(contador.value) // 1

Sin embargo, en las plantillas de Vue no necesitamos usar .value. Vue lo gestiona automáticamente por nosotros,

<template>
  <p>El contador es: {{ count }}</p>
  <button @click="count++">Incrementar</button>
</template>

Reactividad para objetos y arrays con reactive

La función reactive() nos permite crear objetos reactivos completos, donde todas sus propiedades son automáticamente reactivas. Está diseñado para manejar objetos y arrays.

La sintaxis básica de reactive es la siguiente:

import { reactive } from 'vue';

const estado = reactive({
  contador: 0,
  mensaje: 'Hola, LuisLlamas.es!'
});

Con reactive, podemos acceder y modificar las propiedades del objeto directamente, sin necesidad de usar .value:

console.log(estado.contador); // Acceder al valor (0)
estado.contador++; // Incrementar el valor
console.log(estado.contador); // Ahora es 1

Cuando usar ref y cuando reactive

La pregunta del millón, ¿Cuando usar ref y cuando usar reactive? En resumen

const nombre = ref('Ana')
const contador = ref(0)
const activo = ref(true)

const usuario = reactive({
  nombre: 'Ana',
  edad: 28,
  direccion: {
    calle: 'Principal',
    ciudad: 'Barcelona'
  },
  preferencias: ['música', 'cine']
})

Reactividad profunda

Con reactividad profundad nos referimos a si las propiedades internas también van a ser reactivas (por ejemplo, obj.nombre, obj.detalles).

Tanto ref como reactive proporcionan reactividad profundad. Es decir, que estos dos casos van a funcionar correctamente.

<script setup>
import { ref } from 'vue'

const obj = ref({
  nombre: 'Vue',
  detalles: {
    version: 3
  }
})

function cambiarNombre() {
  obj.value.nombre = 'Vue.js' // ✅ Reactivo
}

function cambiarVersion() {
  obj.value.detalles.version = 4 // ✅ Reactivo
}
</script>

<template>
  <div>
    <p>{{ obj.nombre }}</p>
    <button @click="cambiarNombre">Cambiar Nombre</button>
    <p>{{ obj.detalles.version }}</p>
    <button @click="cambiarVersion">Cambiar Versión</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const obj = reactive({
  nombre: 'Vue',
  detalles: {
    version: 3
  }
})

function cambiarNombre() {
  obj.nombre = 'Vue.js' // ✅ Reactivo
}

function cambiarVersion() {
  obj.detalles.version = 4 // ✅ También reactivo
}
</script>

<template>
  <div>
    <p>{{ obj.nombre }}</p>
    <button @click="cambiarNombre">Cambiar Nombre</button>
    <p>{{ obj.detalles.version }}</p>
    <button @click="cambiarVersion">Cambiar Versión</button>
  </div>
</template>

Versiones Shallow

Sin embargo, la reactividad profunda tiene un coste importante de rendimiento, y no siempre vamos a necesitarla. Para ello tenemos shallowRef y shallowReactive, que son versiones superficiales. (es decir, sin reactividad profunda).

import { shallowRef } from 'vue'

const user = shallowRef({
  name: 'Alice'
})

user.value.name = 'Bob' // No dispara reactividad automáticamente
user.value = { name: 'Charlie' } // Cambiar el objeto sí lo hace

import { shallowReactive } from 'vue'

const state = shallowReactive({
  count: 0,
  user: {
    name: 'Alice'
  }
})

// state.count es reactivo
// state.user.name NO es reactivo

Destructurar ref o reactive

Destructurar tanto ref como reactive directamente va darnos problemas porque va a romper el sistema de reactividad (de hecho es un error habitual ⚠️).

const count = ref(10)
const { value } = count

const state = reactive({ count: 10, name: 'Alice' })

const { count, name } = state

En su lugar, podemos usar las siguientes funciones, que nos permiten destructurar o convertir entre los distintos tipos manteniendo de reactividad

import { reactive, toRefs } from 'vue'

const estado = reactive({
  nombre: 'Ana',
  edad: 28
})

// Convertir a refs individuales
const { nombre, edad } = toRefs(estado)

// Ahora podemos usar nombre.value y mantener la reactividad
nombre.value = 'Carlos' // También actualiza estado.nombre

import { reactive, toRef } from 'vue'

const estado = reactive({ contador: 0 })
const contadorRef = toRef(estado, 'contador')

contadorRef.value++ // También incrementa estado.contador

import { ref, reactive } from 'vue'

const nombre = ref('Ana')
const edad = ref(28)

// Crear un objeto reactivo con refs
const usuario = reactive({
  nombre,
  edad
})

nombre.value = 'Carlos' // También actualiza usuario.nombre
usuario.edad = 29      // También actualiza edad.value

Versiones readonly

A veces vamos a querer crear una verisón versión inmutable (solo lectura) de un valor reactivo (ref o reactive), impidiendo su modificación directa. Por ejemplo, esto es útil si queremos proteger datos que no deberían ser modificados desde ciertos componentes o funciones.

Para ello tenemos las versionesreadonly y shallowReadonly. Estas

import { reactive, readonly } from 'vue'

const state = reactive({ count: 0 })
const readonlyState = readonly(state)

readonlyState.count++ // ❌ Error (en modo dev): Cannot assign to read only property

Funcionamiento interno Avanzado

Por si en algun momento os interesa produnzar un poco en entender cómo funciona la reactividad y la “magia” que hace Vue.js, vamos a ver brevemente cómo funciona internamente.

Vue 3 implementa un sistema de reactividad basado en Proxies de JavaScript, que fue una gran mejora respecto al sistema basado en Object.defineProperty() de Vue 2.

Básicamente,

Es decir, si vieramos el proceso (muy simplificado) sería algo como lo siguiente.

// Esto es una simplificación conceptual, no código real de Vue
function createReactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      // Registrar que alguien está accediendo a esta propiedad
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      const oldValue = target[key]
      target[key] = value
      // Notificar a los efectos si el valor cambió
      if (oldValue !== value) {
        trigger(target, key)
      }
      return true
    }
  })
}

Vue.js realiza estas acciones, junto con un seguimiento de las dependencias de cada objeto tracking y un mecanismo de actualizacion de la vista trigger, para que todo sea cómodo de usar para nosotros.

Por otro lado, la necesidad de .value se debe a las limitaciones de JavaScript con respecto a la reactividad de valores primitivos. A diferencia de los objetos, los valores primitivos se pasan por valor y no por referencia, lo que significa que Vue no podría rastrear rastrear sus cambios directamente.

Por ese motivo ref es un wrapper para un valor primitivo, que permite envolver la variable en un objeto, permitiendo que el sistema de reactividad de Vue.js haga su trabajo.