Watch vs WatchEffect

Aparte de ref vs reactive, otra de las confusiones típicas al aprender la API de Composición es la diferencia entre watch y watchEffect.

Sí, ambos sirven para observar valores reactivos y reaccionar a sus cambios, pero hay varios detalles que debes conocer.

watch en Composition API

Empecemos por el más sencillo. Si tienes experiencia con Vue 2 la opción watch de la Options API funciona como el hook watch de la Composition API.

Un pequeño ejemplo:

// Options API
export default {
  data: () => ({
    name: "Juan",
  }),
  watch: {
    name(newName, oldName) {
      // Haz algo (side effects) 👁
    },
  },
};

    

// Composition API
import { ref, watch } from "vue";

const name = ref("Juan");

watch(name, (newName, oldName) => {
  // Haz algo (side effects) 👁
});

    

Como ves, con watch observamos un valor reactivo y, cuando este cambia, hacemos algo (side effect) en el sistema como por ejemplo modificar el DOM o lanzar alguna operación asíncrona.

El nuevo watchEffect

Si con watch observamos un único valor reactivo, con watchEffect podemos observar varios en un mismo callback.

Una forma de entender watchEffect es compararlo con las propiedades computadas: en una propiedad computada podemos retornar un nuevo valor cuando diferentes piezas del estado cambian.

Con watchEffect ocurre lo mismo, pero en lugar de retornar un valor, (de nuevo) hacemos algo el sistema:

import { ref, watchEffect, computed } from "vue";

const name = ref("Juan");
const surname = ref("Núñez");

watchEffect(() => {
  // Se activa de forma inmediata y cuando name o surname cambie
  // Haz algo (side effects) 👁
  console.log(name.value);
  console.log(surname.value);
});

const completeName = computed(() => {
  // Retorna un valor cuando name o surname cambie
  return `${name.value} ${surname.value}`;
});

    

watchEffect observará cambios en todos los valores reactivos referenciados dentro de su callback. Esto lo hace más polivalente que watch.

Además, a no ser que utilices la opción innmediate con watch, el callback que le pases solo se ejecutará cuando el valor que estés observando cambie. Esto no ocurre con watchEffect, ya que se inicia de forma inmediata.

¿Cuándo usar watch?

• Usa watch cuando quieras llevar el control forma precisa, es decir, de un valor determinado.
• Usa watch si quieres acceder al valor anterior y al nuevo (esto no se puede hacer con watchEffect).

¿Cuándo usar watchEffect?

• Usa watchEffect si necesitas controlar varias propiedades reactivas a la vez y no necesitas sus valores anteriores.
• Usa watchEffect si además necesitas lanzar el callback de forma inmediata (por ejemplo para tareas asíncronas).