Watchers en Vue.js

Los watchers de Vue.js nos permiten ejecutar una función cada vez que una propiedad de nuestro componente cambie su valor.

Vamos a ver un ejemplo para verlo más claro:

See the Pen Vue.js 2 – Watchers by vreaxe (@vreaxe) on CodePen.

Tenemos una propiedad counter que está inicializada a 0, también tenemos unos botones que cada uno ejecuta un método, uno ejecuta el método add que suma y el otro ejecuta el método sub que resta 1 al valor de counter. Lo que hace el watcher que tenemos en la propiedad counter es cuando cambia el valor, imprimir por consola los valores. Como puedes ver, los watchers tienen dos parámetros aunque son opcionales. El primer parámetro es el nuevo valor de la propiedad y el segundo es el valor antiguo.

En caso de que la propiedad a la queremos observar, sea una propiedad que está en un objeto (en el caso del ejemplo el objeto es form y la propiedad es name) para poderla observar tendremos que hacerlo de la siguiente manera:

Este es un ejemplo muy sencillo para ver cómo funcionan los watchers, ya que en la serie no los había tratado. En la documentación de Vue.js dice que es recomendable utilizar las computed properties siempre que se pueda. Según la documentación, los watchers son recomendables utilizarlos cuando queramos ejecutar operaciones asíncronas o costosas. Para ver las diferencias entre computed properties y watchers, en este post de StackOverflow se explica muy bien.

-

• https://vuejs.org/v2/guide/computed.html