`ref` y `reactive` en Vue Composition API

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:37

`ref` y `reactive` en Vue Composition API

Curso de Vue.js: Componentes y Composition API

Clase 14 de 23

Clase 14 / 23

Recursos

Crear variables reactivas en Composition API de Vue.js cambia la forma en que defines el estado dentro de un componente. En lugar de declarar datos en la opción data, ahora trabajas con funciones como ref y reactive dentro de setup, lo que te da más control y te permite escribir lógica con JavaScript puro sin perder la reactividad.

Esta guía es para ti si vienes de Options API y quieres entender cómo declarar valores que se actualizan solos en la vista cuando cambian en el código.

Cómo se declara una variable reactiva con ref en Vue

La función ref crea una referencia reactiva a un dato. La importas directamente desde Vue y la usas dentro de setup para envolver el valor que quieres observar.

js import { ref } from 'vue'

export default { setup() { const text = ref('Hola, Vue') const counter = ref(0)

setInterval(() => {
  counter.value++
}, 500)

return { text, counter }

} }

Fíjate en dos detalles que marcan toda la diferencia:

Para leer o reasignar el valor dentro de setup, siempre usas .value.
En el template no necesitas .value; Vue lo resuelve automáticamente.
Para que la variable esté disponible en el template, la incluyes en el return de setup.

¿Qué hace ref en Vue 3? Crea una referencia reactiva a un valor primitivo como un número, string o booleano. Accedes a ese valor con .value dentro del script y directamente por su nombre en el template.

Por qué necesitas usar .value con ref

Cuando envuelves un valor con ref, Vue devuelve un objeto contenedor. Ese contenedor expone la propiedad value, que es la que el sistema de reactividad observa.

Si intentas reasignar la variable sin .value, rompes la referencia y Vue deja de detectar el cambio. Por eso la convención es estricta: dentro del script, siempre .value.

El ejemplo del setInterval lo deja claro. Cada 500 milisegundos se ejecuta counter.value++ y la vista se actualiza sola, sin necesidad de un hook mounted ni de declarar el dato en data. Es JavaScript plano apoyado por la reactividad de Vue.

Cuándo usar reactive en lugar de ref

ref funciona perfecto para tipos primitivos, pero cuando trabajas con objetos conviene usar reactive. Esta función toma un objeto completo y lo convierte en reactivo, sin obligarte a usar .value en cada propiedad.

js import { reactive } from 'vue'

export default { setup() { const obj = reactive({ counter: 0 })

setInterval(() => {
  obj.counter++
}, 500)

return { obj }

} }

La diferencia práctica es esta:

Con ref, accedes con variable.value.
Con reactive, accedes con objeto.propiedad.
En el template, ambos se usan sin sintaxis adicional.

¿Cuál es la diferencia entre ref y reactive? ref envuelve valores primitivos como strings, números o booleanos y requiere .value. reactive envuelve objetos y permite acceder a sus propiedades de forma directa.

Qué pasa si usas ref con un objeto

En la clase ocurre justo eso: al envolver un objeto con ref, aparece un error al intentar leer la propiedad. La solución es cambiar a reactive, que está pensado para estructuras complejas. Esa es la regla práctica que conviene memorizar.

Cómo expone setup las variables al template

El puente entre la lógica y la vista es el return de la función setup. Todo lo que devuelvas en ese objeto queda disponible en el template del componente.

Esto reemplaza el comportamiento que antes lograbas con data, y te da una ventaja extra: dentro de setup puedes mezclar declaraciones, llamadas a funciones, setInterval, condicionales y cualquier construcción de Vanilla JavaScript. La reactividad sigue funcionando mientras respetes la convención de .value en los ref.

¿Necesito devolver las variables en setup? Sí. Solo lo que retornas desde setup está disponible en el template. Si no lo incluyes en el return, Vue no puede renderizarlo.

Un punto importante: si declaras una variable normal sin ref ni reactive, Vue no la observa. Aunque cambie su valor en memoria, la vista nunca se va a actualizar. Esa conciencia de qué es reactivo y qué no es lo que te da control real sobre el componente.

Con estas dos funciones ya tienes la base para construir cualquier estado dentro de Composition API. ¿Cuál crees que vas a usar más en tus componentes, ref o reactive? Cuéntame en los comentarios cómo lo estás aplicando en tu proyecto.

Diana Martinez

Hace 5 años

La reactividad de VueJS es posible gracias al objeto Proxy en JavaScript.

Proxy nos permite crear una referencia a otro objeto, que se comportará igual que si se tratara del objeto original, pero agregando la capacidad de escuchar cada vez que un valor del objeto cambia para ejecutar algún código.

De hecho, cada cambio que hacemos sobre un objeto Proxy, en realidad se aplica al objeto original, aún así, para JS se sigue tratando de dos objetos distintos, por lo que si aplicamos un cambio al objeto original, el objeto Proxy no se enterará, es decir, el valor si se verá reflejado al accederlo, pero los handlers que escuchan esos cambios no se activarán.

// Ejemplo de proxy
// Se define el objeto original
const obj = {
  counter: 0
};

/*
 Se definen los handlers,
 que escucharán todo lo que suceda con el objeto original.
*/
const handlers = {
  /* 
    Este handler escucha cada vez que
    asignamos un nuevo valor a un atributo del objeto original.
  */
  set(obj, prop, val) {
    /*
      obj: refiere al objeto original
      prop: es el atributo del objeto, por ejemplo: counter
    */
     console.log(`update: ${prop}`);
  }
}

// Creamos un proxy de obj
const proxy = new Proxy(obj, handlers);

// Ejecutamos lo siguiente en la consola
obj.counter 
output: 0

proxy.counter
output: 0

// el handler no se ejecuta
obj.counter++

obj.counter
output: 1

proxy.counter
output: 1

// el handler si se ejecuta
proxy.counter++
output: update counter

obj.counter
output: 2

proxy.counter
output: 2

Es gracias al objeto Proxy, que VueJS puede saber que un valor ha cambiado y así propagar ese cambio a todos los lugares dónde se use ese valor, esto es a lo que conocemos cómo reactividad.

Sin embargo, el objeto Proxy tiene ciertas reglas para funcionar, la principal es que necesita envolver a un objeto, no puede funcionar sobre variables que solo tengan valores de tipo primitivo (números, cadenas de texto, booleanos, etc).

Es por eso que cuándo se trata de valores de tipo primitivo, cómo es el caso de la función ref, siempre tenemos que usar el atributo value para acceder al valor y así mantener la reactividad, pues por detrás estará creando un objeto con la propiedad value, a la cuál le asignará el valor que ref recibe por argumento.

// Podemos imaginar el código de ref más o menos así
function ref(value) {
  return new Proxy({ value }, {
    set(obj, prop, val) {
  	/* Aquí vue escucha cuándo asignamos un nuevo valor */
    }
  });
}

// Uso
const counter = ref(0);
counter.value = 10;
console.log(counter.value); // output 10

Mientras tanto cuándo usamos reactive, el valor que pasamos por argumento ya es un objeto, así que VueJS puede aplicarle todo su sistema de reactividad sin necesidad de hacer nada más.

// Podemos imaginar el código de reactive más o menos así
function ref(value) {
  return new Proxy(value, {
    set(obj, prop, val) {
  	/* Aquí vue escucha cuándo asignamos un nuevo valor */
    }
  });
}

// Uso
const obj = reactive({ counter: 0 });
obj.counter = 10;
console.log(obj.counter); // output 10

Es por esto que en variables creadas con ref necesitamos usar el atributo value, pero en variables creadas con reactive, no es necesario.

Esto también significa que debemos tener cuidado al usar cosas cómo el spread operator (...), ya que estaríamos extrayendo el valor del objeto Proxy, y por lo tanto obtenemos el valor, más no la referencia, y podemos perder la reactividad.

Luciano Cavallo

Hace 5 años

Genial esta explicación, 👏

Danilo Hernandez

Hace 5 años

Excelente explicación. Gracias Diana.

Comentarios (12)12 comentarios

Miguel Angel Reyes Moreno

Hace 4 años

Anderson Eduardo Arévalo Ramírez

Josue Cerron Tuesta

Angel Fernando Quiroz Campos

Cristian Rodriguez Morales

Braian Molina

Francisco Ruiz

Manuel Felipe Alzate Salazar

Luis Rafael Augsburger

Jaime Eduardo Falla Cardozo

Felix Torres Javier Antonio

Kenneth Angulo L

Hace 2 días

Alejandro Sebastian Dubon Estrada

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

`ref` y `reactive` en Vue Composition API

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos