Vue Academy · Lección

ref frente a reactive: cuándo usar cada uno

Acceso mediante ref.value, desempaquetado de reactive en templates, toRefs() y toRef() para la desestructuración.

ref frente a reactive: cuándo usar cada uno es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Dos herramientas de reactividad

Vue ofrece dos formas principales de crear estado reactivo: ref() y reactive(). Se solapan en algunos aspectos, pero cada una se adapta mejor a determinadas situaciones. Saber cuándo elegir cada una le ayuda a mantener el código limpio.

ref funciona con cualquier valor

ref() puede envolver cualquier cosa: un número, una cadena, un booleano, un array o un objeto. En JavaScript, el valor se encuentra en .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref se desenvuelve automáticamente en las plantillas

Aunque debe escribir .value en JavaScript, la plantilla desenvuelve automáticamente un ref de nivel superior. Por eso {{ count }} funciona directamente.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive es para objetos

reactive() solo acepta objetos (incluidos arrays y Maps). Devuelve un proxy profundamente reactivo y se accede directamente a sus propiedades; no hay .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive es profundamente reactivo

Los objetos anidados y los arrays dentro de un objeto reactive también son reactivos. Modificar una propiedad anidada activa las actualizaciones sin trabajo adicional.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

La limitación de reactive: la desestructuración lo rompe

Si desestructura un objeto reactive, las variables extraídas se convierten en valores normales y pierden la reactividad. Este es el principal inconveniente que debe tener en cuenta.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

La solución: toRefs para desestructurar de forma segura

toRefs() convierte cada propiedad de un objeto reactivo en un ref. Así puede desestructurar el objeto y conservar la reactividad, porque cada parte es un ref vinculado de nuevo al origen.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef para una sola propiedad

Si solo necesita una propiedad como ref, utilice toRef(state, 'key'). Se mantiene sincronizada con el objeto de origen en ambas direcciones.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Una regla práctica

Utilice ref() para valores primitivos (números, cadenas y booleanos) y valores independientes.
Utilice reactive() para un grupo de propiedades relacionadas que formen un único objeto.
Al devolver un objeto reactivo desde un composable, envuélvalo en toRefs().

ref también puede contener objetos

No está obligado a elegir reactive para los objetos. Un ref que contiene un objeto también es profundamente reactivo; solo tiene que acceder a él mediante .value. Muchos equipos utilizan ref en todas partes por coherencia.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Tabla resumen

ref: cualquier valor, requiere .value en JS, se desenvuelve automáticamente en la plantilla y puede reasignarse por completo.
reactive: solo objetos, no requiere .value, es profundamente reactivo, pero se rompe al desestructurar y no puede reasignarse.
toRefs: puente que permite desestructurar propiedades reactivas.

Comprobación rápida

Elija la herramienta adecuada.

Repaso

Ideas clave:

ref() envuelve cualquier valor y requiere .value en JavaScript.
reactive() es para objetos y es profundamente reactivo, pero la desestructuración lo rompe.
toRefs() permite desestructurar un objeto reactivo de forma segura.
Utilice ref para valores primitivos y reactive para el estado agrupado de un objeto.

Preguntas frecuentes

¿La lección «ref frente a reactive: cuándo usar cada uno» es gratis?

Sí — el texto completo de «ref frente a reactive: cuándo usar cada uno» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «ref frente a reactive: cuándo usar cada uno»?

Acceso mediante ref.value, desempaquetado de reactive en templates, toRefs() y toRef() para la desestructuración. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «ref frente a reactive: cuándo usar cada uno»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

¿Por qué Composition API?
Función setup() y variables reactivas
ref frente a reactive: cuándo usar cada uno
Computed y watch en Composition API

← Volver a Vue Academy