Introducción

Vue.Js es un framework maravilloso. Ofrece, al igual que AngularJS (y no sé cuáles otros, no los he usado) una forma de vigilar el cambio de un valor a través de un watch, watcher u observador.

Esto permite observar el cambio de una variable, ya sea primitiva o compleja como un objeto o arreglo.

Veamos entonces cómo usar de forma correcta a watch en el framework web de JavaScript Vue.js

Watch en VueJS

Watch sirve para vigilar variables que pertenecen a nuestra app. Por ejemplo, si en la data tenemos a la propiedad nombre así:

data: () => ({
    nombre: "",
}),

No te confundas por la función, estamos usando sintaxis de funciones flecha.

El nombre, al inicio, es una cadena vacía. Ahora, para vigilarlo podemos hacer esto:

watch: {
    nombre(nuevoValor, valorAnterior){
      console.log("El nombre pasó de ser %s a %s", valorAnterior, nuevoValor);
    }
  }

Aquí viene lo importante. Definimos a watch como un objeto, y las propiedades de ese objeto son funciones. Cada función debe tener exactamente el mismo nombre que la variable que estamos vigilando.

Cuando cambie el valor, el framework se encargará de llamar a esa función. Le pasará 2 argumentos, en el siguiente orden: el nuevo valor y el valor anterior.

Es decir, el valor que estaba antes del cambio, y el valor actualizado.

Ejemplo de watch simple en Vue

Para probar todo lo de arriba, hagamos una app de prueba. Importamos a Vue, y en nuestro script ponemos lo siguiente:

const app = new Vue({
  el: "#app",
  data: () => ({
    nombre: "",
  }),
  watch: {
    nombre(nuevoValor, valorAnterior){
      console.log("El nombre pasó de ser '%s' a '%s'", valorAnterior, nuevoValor);
    }
  }
});

Luego, en el archivo HTML ponemos esto:

<div id="app">
 <input placeholder="Escribe tu nombre" v-model="nombre" type="text" name="nombre" id="nombre"/>
</div>

Lo que hacemos es ligar el input con el modelo de nuestra app. Ahora sí, cada que cambie el valor, en la consola se escribirá lo que pasa.

Si no me crees, pruébalo tú mismo en este pen.

Si abres la consola, se verá algo así:

No importa si el usuario escribe, pega o arrastra texto, el watch se dará cuenta porque por ello es un vigilante.

Watch con profundidad: vigilar objetos

Ahora veamos otra cosa interesante y es que también podemos vigilar cuando un objeto cambia, o mejor dicho, cuando la propiedad de un objeto cambia.

Para esto la sintaxis es diferente. Si tenemos un objeto así en nuestros datos…

  data: () => ({
    mascota: {
  nombre: "",
  edad: null,
 }
  }),

Ya no podemos vigilarlo como un dato primitivo, debemos vigilarlo de manera profunda. Así que, usamos esto:

watch: {
   mascota: {
    deep: true,
    handler: (nuevoValor, valorAnterior) => {
     console.log("La mascota era ", valorAnterior, " y ahora es", nuevoValor);
  }
   }
  }

Lo que cambia es que ahora en lugar de poner el nombre del dato como función, lo ponemos como objeto. Y ese objeto tiene 2 propiedades: el handler o manejador, y una propiedad que indica si queremos que sea una observación profunda (con deep: true).

Aclaración sobre la consola: cuando se imprime, el objeto (anterior y nuevo) es el mismo.

Esto pasa por las referencias de JavaScript, las cuales al momento de que imprime apuntan al mismo objeto, no por error del código.

Así que no imprime datos correctos, pero sí está vigilando.

Además, cada que vemos una propiedad se invoca al getter, el cual estará apuntando a la versión más reciente.

Pruébalo aquí.

Cada que cambiemos el nombre o la edad de la mascota (y si hubieran otras propiedades, también se desencadenaría) se llamará a la función y se nos pasará el objeto completo.

Vigilar arreglos

Es lo mismo que vigilar valores normales. Es decir, no necesitamos una observación profunda. Tal vez sería necesario que sea profundo en caso de que ese arreglo tenga objetos, pero si no, no hay problema.

Para ejemplificar, tenemos esto:

 data: () => ({
        nombre: "",
        nombres: [],
    }),

Un nombre que pondremos en el arreglo, y un arreglo de nombres.

Más adelante podemos definir el método para añadir el nombre al arreglo:

 methods: {
        agregar() {
            if (this.nombre) {
                this.nombres.push(this.nombre);
                this.nombre = "";
            }
        }
    },

Y poner un watcher:

    watch: {
        nombres(nuevoValor, valorAnterior){
   console.log("Ha cambiado");
   console.log("nuevo:", nuevoValor);
   console.log("anterior:", valorAnterior);
  }
    }

Por cierto, lo de la consola (explicado arriba) sigue pasando, pero sí estamos vigilando.

Puedes ver el ejemplo aquí.

Otras cosas importantes

Podemos definir más watchers, ya que watch es un objeto, por lo tanto podemos tener los watchers u observadores que necesitemos.

Lo de las referencias en JavaScript es otro tema, pero ten por seguro que el watch funciona. Esto de las referencias pasa porque se refrescan los objetos en la consola; una forma de eliminar las referencias es creando un objeto fresco.

¿Watch o @change?

No recomiendo usar watch cuando podemos usar un simple @change.

Por ejemplo, si queremos saber cuando un input es actualizado, simplemente le ponemos <input type="text" @change="funcionQueSeraLlamadaCuandoCambie">.

Watch es útil cuando no queremos poner muchos @change, ahorrándonos listeners.

O simplemente cuando queremos observar una variable porque sí; pero recuerda que siempre existirá el evento @change en el elemento input, select y otros más.

Este tutorial fue escrito para explicar cómo usar watch, pero eso no significa que lo debas usar siempre que puedas. En resumen, explica cómo, no por qué ni cuándo.

Eso sí, si queremos vigilar un objeto (por cualquier cosa) no hay forma elegante de hacerlo en un evento del DOM, necesariamente tendríamos que usar watch.