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.