Watchers en Vue.js
Los watchers en Vue.js son la manera más genérica de reaccionar al cambio de una propiedad en una instancia de Vue. Anteriomente hemos visto las Propiedades Calculadas en Vue.js y su diferencia con los Métodos en Vue.js. El día de hoy veremos cómo funcionan los Watchers.
Los watchers en Vue.js se definen en el objeto watch tal y cómo definiríamos una propiedad calculada en el objeto computed. Los watchers son como observadores que reaccionan al cambio de una propiedad definida en la instancia de Vue. Veamos un sencillo ejemplo en el cual calculamos el valor de la suma de dos números con un método y con watchers.
var app = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
sum2: 0
},
methods: {
sum: function () {
return this.n1 + this.n2;
}
},
watch: {
n1: function(value) {
this.sum2 = this.n2 + value
},
n2: function(value) {
this.sum2 = this.n1 + value
}
}
});
Observa que hemos definido dos watchers, uno que reacciona al cambio de la propiedad n1 y otro que reacciona al cambio de la propiedad n2. También puedes notar que la definición del watcher es mucho más genérica e individual que el cálculo de la suma de dos números con un método. Esto no quiere decir que los métodos sean mucho más eficientes y elegantes que un watcher, aunque para este ejemplo en particular el código es mucho menos repetitivo e imperativo con un método. Veamos ahora el HTML que muestra este ejemplo en ejecución.
<div id="app">
Type the first number:
<input type="number" v-model.number="n1"><br />
Type the second number:
<input type="number" v-model.number="n2"><br />
The sum() is: {{ '\{\{ sum() \}\}' }}<br />
The sum2 is: {{ '\{\{ sum2 \}\}' }}<br />
</div>Finalmente nota también que los watchers son propiedades y no pueden tener el mismo nombre que un método en la misma instancia de Vue. Veamos el ejemplo anterior en ejecución en codepen.