Método watch de Vue con la Composition Api

En ciertas ocasiones, cuando el estado de una aplicación o componente cambia, por ejemplo, como resultado de una llamada asíncrona, una modificación del DOM, etc., nos interesará estar atentos a este cambio y reaccionar para realizar otra acción. Con la Composition API de Vue podemos observar este cambio con el método watch, que ejecutará nuestra propia función que realice la acción derivada del cambio.

Uso básico de watch

El método watch nos permite observar valores reactivos y reaccionar a sus cambios. Su primer argumento permite varios tipos de valores reactivos para ser observados: un ref, una función getter o un array.

Veamos un ejemplo sencillo:

<script setup>
import { ref, watch } from 'vue'

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`El contador cambió de ${oldValue} a ${newValue}`);
});

const incrementar = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Contador: {{ count }}</p>
    <button @click="incrementar">Incrementar</button>
  </div>
</template>

Aquí, cada vez que count cambie, watch detectará el cambio y ejecutará la función asociada, registrando los valores antiguo y nuevo en la consola.

watchEffect()

watchEffect es otra forma de observar cambios en Vue. Se ejecuta inmediatamente y reacciona automáticamente a los valores reactivos utilizados dentro de su función sin necesidad de pasarlos por parámetro de forma explícita como con watch.

Ejemplo sencillo:

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`El contador es ahora: ${count.value}`);
});

const incrementar = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Contador: {{ count }}</p>
    <button @click="incrementar">Incrementar</button>
  </div>
</template>

Aquí, watchEffect se ejecuta automáticamente al inicio y cada vez que count cambie.

¿Cuál es la diferencia entre watch y watchEffect?

En general, usa watch cuando necesitas comparar el valor anterior y el nuevo, y watchEffect cuando quieres reaccionar a cualquier valor reactivo utilizado dentro del efecto sin necesidad de declararlo explícitamente.

Conclusión

Vue 3 nos ofrece varios métodos para reaccionar a cambios en nuestros valores reactivos. watch es útil para observar variables específicas y gestionar cambios de forma más controlada, mientras que watchEffect es más conveniente para efectos reactivos inmediatos y automáticos. Comprender cuándo usar cada uno nos ayuda a escribir código más eficiente y organizado.