0Pricing
Frontend Academy · Lección

ref() y reactive()

Cree valores primitivos reactivos con ref(), envuelva objetos con reactive(), comprenda cuándo usar cada uno y acceda a los valores de ref mediante .value.

ref() y reactive() es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Reactividad en Vue 3

La Composition API de Vue 3 utiliza primitivas reactivas para realizar el seguimiento del estado. Hay dos funciones principales: ref() para valores primitivos y reactive() para objetos. Los cambios en estos valores actualizan automáticamente la interfaz.

ref() para valores primitivos

ref(value) envuelve un valor en un contenedor reactivo. Acceda al valor y modifíquelo mediante .value en el script. En las plantillas, Vue desempaqueta las refs automáticamente, por lo que no se necesita .value.

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

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

reactive() para objetos

reactive(object) devuelve un proxy profundamente reactivo del objeto. Acceda directamente a sus propiedades: no se necesita .value en ningún lugar.

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

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref frente a reactive — Cuándo usar cada uno

Use ref() para valores primitivos (string, number, boolean), valores que pueden ser nulos y valores devueltos por composables (son más fáciles de desestructurar). Use reactive() para datos relacionados que pertenecen juntos en un mismo objeto.

Problema de desestructuración de reactive()

La desestructuración de un objeto reactivo hace que se pierda la reactividad, porque las propiedades extraídas son valores normales y no refs reactivas.

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef y toRefs

toRef(obj, 'key') crea una ref vinculada a una propiedad. toRefs(obj) convierte todas las propiedades de un objeto reactivo en refs individuales vinculadas, que se pueden desestructurar de forma segura.

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

ref() para elementos del DOM

Use ref(null) con un atributo ref coincidente en la plantilla para obtener una referencia reactiva a un elemento del DOM o a la instancia de un componente secundario.

<script setup>
import { ref, onMounted } from 'vue';

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef y unref

isRef(val) comprueba si un valor es una ref. unref(val) desempaqueta una ref o devuelve el valor tal cual si no es una ref. Resulta útil en composables que aceptan tanto refs como valores normales.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef y shallowReactive

shallowRef() solo es reactiva en el nivel superior, no en profundidad. shallowReactive() funciona del mismo modo para objetos. Úselas para optimizar el rendimiento cuando no se necesite reactividad profunda, por ejemplo, con estructuras de datos inmutables grandes.

Modificar reactive() frente a reemplazarlo

Con reactive(), modifique las propiedades directamente. No puede reemplazar el objeto completo, porque reactive() necesita conservar la misma referencia. Para reemplazarlo, use ref(), que permite ref.value = newObject.

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

Reactividad profunda

reactive() es profundamente reactiva de forma predeterminada: Vue realiza el seguimiento de los cambios en objetos y matrices anidados. Esto resulta práctico, pero puede ser costoso con objetos muy grandes. Considere usar shallowReactive en casos en los que el rendimiento sea fundamental.

Comprobación rápida

¿Por qué la desestructuración de un objeto reactive() hace que se pierda la reactividad?

Repaso: ref() y reactive()

ref() envuelve valores primitivos; acceda a ellos mediante .value en el script y se desempaquetan automáticamente en las plantillas. reactive() hace que los objetos sean profundamente reactivos; modifique las propiedades directamente. La desestructuración hace que se pierda la reactividad: use toRefs(). ref(null) sirve para las refs de elementos de la plantilla. shallowRef y shallowReactive sirven para optimizar el rendimiento. isRef y unref sirven para las utilidades de composables.

Preguntas frecuentes

¿La lección «ref() y reactive()» es gratis?

Sí — el texto completo de «ref() y reactive()» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «ref() y reactive()»?

Cree valores primitivos reactivos con ref(), envuelva objetos con reactive(), comprenda cuándo usar cada uno y acceda a los valores de ref mediante .value. Practicas Frontend 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 Frontend Academy?

No se requiere experiencia previa. Frontend 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 1 de 4.

¿Cuánto tiempo toma la lección «ref() y reactive()»?

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 Frontend Academy?

Sí. Cada lección de Frontend 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

  1. ref() y reactive()
  2. computed() y watch()
  3. La función setup() y script setup
  4. Composables: funciones de composición reutilizables
← Volver a Frontend Academy