Entendiendo los Watch (Observadores) en vue js

Watch (Observadores) en vue js

Las propiedades watch (observadores) en Vue.js, son funciones que se mantienen a la espera de un cambio en alguna propiedad para ejecutarse.

Estos observadores se utilizan mucho cuando mantenemos un canal abierto con websockets para aplicaciones en tiempo real. Entonces estas propiedades se mantienen a la espera de que el servidor notifique algo para realizar los cambios dentro de la aplicación.

¿Qué diferencia hay con las propiedades computadas?

Las propiedades computadas se utilizan comúnmente para formatear valores, esto porque las propiedades computadas deben retornar un valor. A diferencia de los Watch (Observadores) en vue js, su valor no cambia, solo ejecuta una función notificando que este valor cambió.

Un caso por particular puede ser cuando queremos que nuestros textos siempre estén en mayúsculas, entonces la propiedad computada retorna el valor ya formateado.

Puedes ver mi artículo Entendiendo las propiedades computadas en Vuejs

¿Qué hay que tener en cuanta cuando usamos observables?

Hay que tener en cuanta 2 cosas cuando usanmos Watch (Observadores) en vue js:

  1. Como los observables son funciones, el nombre de la función tiene que tener el mismo nombre que el dato. Esto no genera error ya que no son variables, son propiedades en diferentes objetos
  2. Las observables nos proveen 2 parámetros: el nuevo valor y el valor aterior

Practica con propiedades Watch (Observadores) en vue js.

Para la práctica vamos a realizar una especie de calculadora solo realizará una suma y nos retornará el resultado pero al mismo tiempo nos realizará otras operaciones matemáticas con ese mismo valor.

Vamos a calcular raíz cuadrada, si el numero es par, y para ponerlo mas interesante que porcentaje hubo en el cambio de valor.

Si no tienes un proyecto en Vue creado seguro te interesaría ver: Proyecto Vue.js en node sin CLI

¿Qué tendrémos en el html?

<div id="app">
  <input v-model="num1"/>
  <input v-model="num2"/>
  <button @click="calcular()">Calcular!</button >
  <br>
  <div v-if="resultado">
    <p>El resultado es: {{ resultado }}</p>
    <p>Su raiz cuadrada es: {{ raiz }}</p>
    <p>¿Es par?: {{ esPar }}</p>
    <p>el valor cambió: {{ porcentaje }}%</p>
  </div>
</div>

Vamos a tener 2 inputs y un botón que ejecutan la función de calcular y varios parrafos que mostrarán el resultado

¿Que tendrémos en el javascript?

  new Vue({
    el: '#app',
    data:{
      num1: '',
      num2: '',
      resultado: 0,
      raiz: '',
      esPar: '',
      porcentaje: ''
    },
    watch:{
      resultado(nVal, oVal){

      }
    },
    methods:{
      calcular(){

      }
    }
  })

Como ven tenemos una data, que serán cada uno de los datos que vamos a estar manipulando.

Nuestro observable va a ser el resultado, ya que cuando el resultado cambie, vamos a calcular los otros valores en base al resultado.

Y por supuesto la función calcular.

¿Qué haremos en la función calcular?

Sumaremos el reultado y ya está:

new Vue({
  ...
  methods:{
    calcular(){
    	this.resultado = parseInt(this.num1) + parseInt(this.num2)
    }
  }
})

Al momento que el valor cambie, el watch se ejecuta sin más.

¿Que haremos en el watch?

Solo aplicamos los valores en sus propiedades correspondientes

  new Vue({
    ...
    watch:{
      resultado(nVal, oVal){
        this.raiz = Math.sqrt(nVal)
        this.esPar = nVal % 2 ? 'No' : 'Si'
        this.porcentaje = nVal / oVal * 100
      }
    },
    ...
  })

Puedes ver este proyecto aqui

Artículos que podrían gustarte