Qué son los watchers de Vue

Domina los watchers para reaccionar a cambios en tu view model. Aprende qué son, cómo declararlos y cuándo usarlos para desencadenar código sin agregar complejidad. Aquí verás su diferencia con las computed properties, cómo acceder al valor nuevo y viejo, y un caso típico: llamadas HTTP desde un input de búsqueda.

Watchers y computed: qué cambia y cuándo usarlos

Los watchers son similares a las computed properties, pero cumplen otro rol: reaccionan a cambios. No devuelven valor, no son propiedades y no pueden usarse en expresiones. En cambio, ejecutan funciones cuando una variable del view model cambia.

¿Qué diferencia a un watcher de una computed property?

• Un watcher no devuelve un valor.
• No es una propiedad; es una función que reacciona a cambios.
• No se usa en expresiones del template.
• Se dispara cuando cambia una variable del view model.
• Facilita un patrón observable para ejecutar lógica al modificar datos.

¿Cómo se enlaza un watcher correctamente?

• Se define dentro de un objeto watch.
• Debe llamarse igual que la variable del view model que observa.
• Cada propiedad en watch es una función del mismo nombre que la variable.

Declaración y enlace: cómo crear un watcher

Para empezar, se crea un objeto watch como con computed. Si observas una variable name, el watcher debe llamarse name. Dentro, la función recibe dos argumentos: nuevo valor y valor anterior; así puedes comparar y actuar.

¿Cómo declarar el objeto watch y sus funciones?

export default {
  data() {
    return { name: '' };
  },
  watch: {
    name(newVal, oldVal) {
      console.log('nuevo:', newVal);
      console.log('anterior:', oldVal);
    }
  }
};

¿Qué parámetros recibe un watcher?

• newVal: el valor nuevo tras el cambio.
• oldVal: el valor anterior antes del cambio.
• Puedes imprimirlos en la console para verificar el flujo.
• Útil al probar mientras compila webpack y observas resultados.

Casos prácticos: llamadas HTTP y entradas de usuario

Un uso común es reaccionar a cambios en un input y lanzar una llamada HTTP. Por ejemplo, en un campo de búsqueda, cada tecla puede disparar una función para refrescar resultados en tiempo real.

¿Cómo usar watchers para búsquedas en tiempo real?

• Observar la variable enlazada al input de búsqueda.
• En cada cambio, desencadenar una llamada HTTP.
• Actualizar resultados con el valor nuevo.
• Mantener registro del valor anterior si necesitas comparar.

¿Qué sigue con eventos del usuario?

• Próximo paso: aprender eventos y cómo enlazarlos para ejecutar acciones.
• Combinar watchers y eventos potencia la interacción del usuario.

¿Tienes dudas sobre cómo estructurar tus watchers o qué observar en tu view model? Cuéntame en los comentarios y vemos tu caso concreto.