Cuando trabajas con reactividad en Vue.js, llega un momento en el que no quieres mostrar un valor calculado en la vista, sino simplemente reaccionar a los cambios de una variable. Para eso existen los watchers en Vue.js, una herramienta clave para detectar alteraciones y ejecutar lógica sin acoplarla al template.

¿Qué es un watcher en Vue.js y cuándo conviene usarlo?

Un watcher es una función que observa una variable reactiva y se ejecuta cada vez que su valor cambia. A diferencia de una propiedad computada, no devuelve un valor para el template: ejecuta acciones en segundo plano.

Esto resulta útil cuando necesitas tomar decisiones, llamar al backend o disparar otros métodos en respuesta a un cambio, sin necesariamente renderizar nada nuevo.

¿Cuál es la diferencia entre un watcher y una computed property? La computed devuelve un valor que se usa en el template. El watcher no retorna nada: reacciona al cambio y ejecuta lógica.

¿Cómo se declara un watcher en Vue.js?

La sintaxis es muy parecida a la de las funciones computadas, pero la opción se llama watch. La regla principal: el nombre del watcher debe coincidir con el nombre de la variable que quieres observar [02:10].

Un ejemplo básico, observando una variable text:

javascript data() { return { text: 'Hola, Vue' } }, watch: { text(val, old) { console.log('Watcher', val, old) } }

Cada vez que text cambie, el watcher se activa y registra el nuevo valor.

¿Qué argumentos recibe la función del watcher?

La función recibe dos parámetros muy útiles para tomar decisiones [03:20]:

• El nuevo valor que acaba de asignarse a la variable.
• El valor anterior, antes del cambio.

Con estos dos datos puedes comparar y decidir qué hacer. Por ejemplo, si el valor anterior es igual al nuevo, quizá no quieras hacer nada; si son distintos, puedes lanzar una petición al backend o actualizar otro atributo del estado.

¿Cómo accedo a otras variables dentro del watcher?

Dentro del watcher puedes usar la sintaxis this para acceder a cualquier dato o método del componente [05:30]. Por ejemplo, this.text te da el valor actual, y this.miMetodo() ejecuta un método declarado en el componente.

¿Puedo llamar a un método desde un watcher? Sí. Usa this.nombreDelMetodo() dentro de la función del watcher para delegar la lógica y mantener el código limpio.

¿Cómo aplicar watchers en un caso real como una casa inteligente?

Imagina una casa inteligente con un botón que abre y cierra una puerta, y un texto que refleja el estado actual. Es un escenario perfecto para combinar watchers, computed properties y eventos [07:00].

La lógica es sencilla:

1. Una variable booleana open que indica si la puerta está abierta o cerrada.
2. Un watcher sobre open que actualiza un texto descriptivo cuando cambia el estado.
3. Un botón que invierte el valor de open al hacer click.

¿Cómo se ve la implementación?

javascript data() { return { open: false, text: 'La puerta está cerrada' } }, watch: { open(value) { if (value) { this.text = 'La puerta está abierta' } else { this.text = 'La puerta está cerrada' } } }

En el template, el botón escucha el evento click y alterna el valor con la negación lógica:

html

<div>{{ text }}</div> <button @click="open = !open"> {{ open ? 'Cerrar' : 'Abrir' }} </button>

Con esto, al hacer click la variable cambia, el watcher se dispara y el texto se actualiza automáticamente.

¿Cómo limpio el ternario del template con una computed?

Para mantener el template más legible, puedes mover la condición a una propiedad computada [09:40]:

javascript computed: { buttonLabel() { return this.open ? 'Cerrar' : 'Abrir' } }

Dentro de la computed sí necesitas this para acceder a los datos, mientras que en el template no hace falta.

¿Qué buenas prácticas debo seguir al usar watchers?

Los watchers son potentes, pero conviene mantenerlos enfocados. Algunas recomendaciones:

• Que cada watcher haga una sola cosa, y delegue el resto a métodos auxiliares.
• Evita lógica demasiado compleja dentro del watcher para no perder mantenibilidad.
• Si necesitas un valor derivado para el template, usa una computed en lugar de un watcher.
• Combina watchers, computed properties y eventos para acercarte a la lógica de un proyecto real.

Con estas piezas ya puedes pensar interfaces reactivas más completas. ¿Qué otra funcionalidad de tu proyecto se beneficiaría de un watcher? Compártelo en los comentarios y prueba implementarlo antes de la próxima clase.