Watchers con Composition API en Vue.js

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:005:32

Watchers con Composition API en Vue.js

Curso de Vue.js: Componentes y Composition API

Clase 15 de 23

Clase 15 / 23

Recursos

Los watchers en Vue.js con Composition API te permiten escuchar cambios en variables reactivas y acceder tanto al valor nuevo como al anterior usando la función watch. Si vienes de Options API, la lógica es la misma, pero la sintaxis cambia porque ahora trabajas con programación funcional.

¿Qué hace un watcher en Composition API?

Un watcher observa una variable reactiva y ejecuta una función cada vez que su valor cambia. A diferencia de un computed property, un watcher solo lee el cambio: no retorna un nuevo valor, sino que reacciona ante él.

¿Cuál es la diferencia entre watch y computed? Un computed devuelve un valor derivado y reactivo. Un watch solo escucha el cambio y ejecuta lógica con el valor nuevo y el anterior, sin retornar nada.

Esto te da libertad para ejecutar cualquier código dentro del watcher: llamadas a una API, manipular otros refs, lanzar efectos secundarios o simplemente registrar el cambio en consola.

¿Cómo se importa y usa watch en setup?

En Composition API todo se construye a base de funciones dentro de setup, así que watch se importa desde Vue como cualquier otra utilidad reactiva. Es el mismo patrón que ya viste con ref y reactive.

js import { reactive, watch } from 'vue'

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

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

watch(
  () => object.counter,
  (valor, anterior) => {
    console.log(valor, anterior)
  }
)

return { object }

} }

La función watch recibe dos parámetros: el valor que quieres observar y la función callback que se ejecuta en cada cambio. Esa callback recibe a su vez dos argumentos: el valor nuevo y el valor anterior.

¿Por qué usar una función flecha al observar reactive?

Cuando declaras tu estado con reactive, lo que obtienes es una referencia a un objeto proxy que envuelve al original para hacerlo reactivo. Si pasas directamente object.counter a watch, estarías pasando un valor primitivo desconectado de la reactividad.

Por eso lo envuelves en una función flecha: () => object.counter. Así, Vue.js ejecuta esa función cada vez que necesita leer el valor más reciente y puede comparar correctamente el nuevo contra el anterior.

¿Cuándo usar ref y cuándo reactive con watch?

La sintaxis cambia ligeramente según el tipo de variable reactiva que estés observando, y conviene tenerlo claro para evitar errores silenciosos.

Con ref, puedes pasar la variable directamente a watch porque ya es un objeto reactivo único que Vue detecta de forma automática.
Con reactive, necesitas pasar una función getter que devuelva la propiedad específica que quieres observar.
En ambos casos, la callback recibe (valor, anterior) y la lógica interna es idéntica.

js // Con ref const counter = ref(0) watch(counter, (valor, anterior) => { console.log(valor, anterior) })

// Con reactive const object = reactive({ counter: 0 }) watch( () => object.counter, (valor, anterior) => { console.log(valor, anterior) } )

¿Por qué ref no necesita función y reactive sí? Un ref es un contenedor reactivo único, así que Vue lo rastrea directo. Un reactive es un proxy sobre un objeto, y necesitas un getter para que Vue evalúe la propiedad correcta en cada cambio.

Dentro de la callback puedes escribir cualquier código que necesites: Vanilla JS, manipulación de otros refs, peticiones HTTP o lógica de negocio. El watcher se dispara cada vez que el valor observado cambia, lo que en el ejemplo del setInterval ocurre cada 500 milisegundos.

¿Qué cambia frente a Options API?

La lógica detrás de los watchers no cambia: sigues observando un valor para reaccionar a sus cambios con acceso al valor nuevo y al anterior. Lo que cambia es la forma de declararlos.

En Options API definías los watchers como una propiedad dentro del JSON del componente. En Composition API los declaras como funciones dentro de setup, lo que te permite organizar mejor la lógica relacionada y reutilizarla con composables.

Esa es la verdadera ganancia de Composition API: dejas de pensar en bloques separados (data, methods, watch, computed) y empiezas a agrupar el código por funcionalidad. ¿Tú ya estás migrando tus componentes a Composition API o sigues trabajando con Options? Cuéntame en los comentarios cómo te está yendo.

Conceptos clave que aparecen en la clase

Watcher [0:05]: función que escucha cambios en una variable reactiva y entrega valor nuevo y anterior.
Composition API [0:00]: estilo de Vue.js basado en funciones dentro de setup en lugar de opciones en un objeto JSON.
reactive [1:35]: crea un proxy reactivo sobre un objeto, ideal para estados con varias propiedades.
ref [1:40]: crea una referencia reactiva para valores únicos, accesible con .value fuera del template.
Función getter en watch [2:50]: necesaria al observar propiedades de un objeto reactive para mantener la reactividad.
setInterval de 500 ms [1:20]: dispara el cambio del contador y permite ver el watcher en acción.

Kenneth Angulo L

Hace 21 horas

En un ejercicio que hice:

watch(nombre, (nuevoNombre, nombreAnterior) => {

const nombreAnteriorTexto = nombreAnterior || '(vacío)'

const nuevoNombreTexto = nuevoNombre || '(vacío)'

mensajeCambio.value = `El nombre cambió de "${nombreAnteriorTexto}" a "${nuevoNombreTexto}".`

})

watchEffect(() => {

caracteres.value = nombre.value.trim().length

})

Explicacio:

watch(nombre, callback) observa explícitamente el refnombre.
El callback recibe el valor nuevo y el anterior, y se ejecuta cuando cambia la fuente.
watchEffect(callback) ejecuta el efecto de inmediato y vuelve a ejecutarlo cuando cambia una dependencia usada dentro de él.
Para valores que solo se derivan del estado, normalmente conviene usar computed; los watchers son útiles para efectos secundarios.

Comentarios (12)12 comentarios

Miguel Angel Reyes Moreno

Hace 4 años

Josue Cerron Tuesta

Edward Camilo Martinez Frias

Juan José Guzmán Cardona

Maximiliano Chamena

Sam Leonetti

Carlos Rodríguez

Katherine Alondra Ruiz

Diana Martinez

Juan Guillermo Perez Cardozo

Mauricio Jourdan

Seba Cardoso

Hace 3 meses

Fabricio Orrala

Hector Daniel Tapia

Hace 2 años

Julio Emiliano Garza Jiménez

Hace 3 años

Jose Alejandro Pantoja Giraldo

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

Watchers con Composition API en Vue.js

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos