Vue Academy · Lección

Fundamentos de la reactividad

Aprenda cómo Vue realiza el seguimiento de las dependencias reactivas

Fundamentos de la reactividad es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. 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 3 lecciones en total.

¿Qué es la reactividad?

La reactividad consiste en que Vue actualiza automáticamente el DOM cuando cambian los datos.

Usted cambia un valor en JavaScript
Vue detecta el cambio
La vista se vuelve a renderizar para reflejarlo

No es necesario manipular el DOM manualmente.

Cómo realiza Vue el seguimiento de dependencias

Vue utiliza un sistema de seguimiento de dependencias.

Cuando un renderizado lee un valor reactivo, Vue registra esa dependencia
Cuando ese valor cambia posteriormente, Vue sabe qué renderizados debe volver a ejecutar
Esto hace que las actualizaciones sean precisas y eficientes

ref para valores primitivos

En la Composition API, ref hace que un único valor sea reactivo.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref en las plantillas

En las plantillas, las refs se desenvuelven automáticamente, por lo que no necesita escribir .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive para objetos

reactive hace que un objeto completo sea reactivo. Se accede directamente a sus propiedades, sin .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref frente a reactive

Para elegir entre ambos:

ref funciona con cualquier valor (primitivos y objetos) y se accede mediante .value
reactive solo funciona con objetos y se accede directamente

Muchos equipos prefieren usar ref en todas partes por coherencia.

La opción data (Vue 2 / Options API)

La Options API utiliza la función data. Cada propiedad devuelta es reactiva.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Particularidades de la reactividad con arrays

La asignación directa a un índice del array puede ser complicada, especialmente en Vue 2.

En Vue 2, asignar arr[5] = x no activaba las actualizaciones
Los proxies de Vue 3 gestionan la mayoría de los casos, pero aun así conviene tener cuidado

Prefiera los métodos de array para obtener claridad y seguridad.

Métodos reactivos de array

Los métodos que mutan el array, como push, splice y pop, se siguen de forma reactiva.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Reemplazar frente a mutar

Hay dos formas de actualizar arrays:

Mutar con push, splice y sort
Reemplazar asignando un array nuevo, por ejemplo, a partir de filter o map

Ambas opciones activan la reactividad en Vue 3. Reemplazar suele ser más claro para listas derivadas.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Cómo evitar perder la reactividad

La desestructuración de un objeto reactivo rompe la reactividad de esas variables.

Extraer una propiedad copia su valor actual
Use toRefs para conservar la reactividad al desestructurar

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Comprobación rápida

Compruebe sus conocimientos sobre la reactividad de Vue.

Repaso: fundamentos de la reactividad

Ha aprendido cómo funciona la reactividad de Vue:

Vue realiza un seguimiento de los datos que utiliza cada renderizado
ref hace que los valores sean reactivos (use .value en JS)
reactive hace que los objetos sean reactivos (acceso directo)
La Options API utiliza la función data
Use métodos de array y toRefs para evitar perder la reactividad

A continuación: propiedades computadas.

Preguntas frecuentes

¿La lección «Fundamentos de la reactividad» es gratis?

Sí — el texto completo de «Fundamentos de la reactividad» 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 3 lecciones en total.

¿Qué aprenderé en «Fundamentos de la reactividad»?

Aprenda cómo Vue realiza el seguimiento de las dependencias reactivas 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 1 de 3.

¿Cuánto tiempo toma la lección «Fundamentos de la reactividad»?

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

← Volver a Vue Academy