Watchers en Vue Composition API

Domina los watchers en Vue Composition API con confianza: aprende a observar cambios reales, evitar imports erróneos y reaccionar al estado sin fricción. Aquí verás cómo ajustar estilos por stock, calcular totales del carrito y entender por qué algunas fuentes requieren funciones anónimas. Todo con código claro y directo.

¿Cómo crear watchers en Vue Composition API de forma correcta?

Para observar una propiedad en Composition API usamos la función watch de Vue. Es clave traerla desde Vue y pasarle una fuente reactiva. Si la propiedad no es una referencia directa, conviene usar una función anónima que devuelva esa propiedad para que Vue la rastree correctamente.

• Importa siempre desde Vue. Evita auto-imports de Node.js.
• Pasa una fuente reactiva o una función que la retorne.
• Usa el handler con valor actual y valor antiguo.
• Imprime para depurar sin bloquear la UI.

¿Por qué importar watch desde Vue y no desde Node.js?

A veces el editor sugiere imports incorrectos. Asegúrate de traerlo de 'vue', no de paquetes de Node.js. Un import equivocado rompe la reactividad y lanza warnings.

// correcto
import { watch } from 'vue';

// evita imports accidentales de Node.js
// import { watch } from 'node:fs'; // ❌
// import watch from 'node:watch';   // ❌

¿Cómo observar propiedades no reactivas con una función anónima?

Si observas un valor plano (por ejemplo, un número dentro de un objeto reactivo), watch necesita una función que lo devuelva. Observar directamente el valor pasa un literal y no una fuente reactiva.

import { reactive, watch } from 'vue';

const productState = reactive({
  activeImage: 0,
});

// incorrecto: pasa el valor 0, no una fuente reactiva
// watch(productState.activeImage, (nuevo, antiguo) => { ... });

// correcto: función que retorna la propiedad a observar
watch(() => productState.activeImage, (nuevo, antiguo) => {
  console.log('activeImage actual:', nuevo, 'anterior:', antiguo);
});

¿Qué recibe el handler y para qué sirve?

El handler recibe el valor actual y el antiguo. Úsalo para depurar o disparar efectos colaterales controlados.

• valor actual: estado más reciente tras el cambio.
• valor antiguo: estado antes del cambio.
• patrones comunes: logs, validaciones, sincronización de estado.

¿Cómo cambiar estilos con cambios de stock del producto?

El color del precio puede reaccionar al stock. Cuando el stock sea crítico, cambia la UI para alertar al usuario. Define primero el estado del color y observa el stock desde props con una función.

import { reactive, watch } from 'vue';

const productState = reactive({
  priceColor: 'rgb(73, 155, 234)', // azul inicial
});

// observar el stock que viene de props
watch(() => props.product.stock, (stockActual) => {
  if (stockActual <= 1) {
    productState.priceColor = 'rgb(255, 87, 87)'; // rojo crítico
  }
});

• priceColor: estado reactivo para estilos dinámicos.
• props.product.stock: fuente no ref, obsérvala con función.
• condición crítica: stock menor o igual a 1 activa color rojo.
• beneficio: feedback visual inmediato en la vista.

¿Cómo calcular el total del carrito con un watcher sobre un arreglo proxy?

Al observar arreglos u objetos reactivamente creados, Vue los convierte en proxy. Así, no necesitas opciones adicionales para escuchar cambios internos: cualquier mutación en el arreglo dispara el watch.

• cartState.cart es un arreglo reactivo: se observa como proxy.
• no hace falta pasar deep: Vue ya rastrea sus claves internas.
• cuando cambia el carrito, recalcula el total con reduce.

import { reactive, watch } from 'vue';

const cartState = reactive({
  cart: [],
  total: 0,
});

watch(() => cartState.cart, (nuevo, antiguo) => {
  cartState.total = cartState.cart.reduce((acc, p) => {
    // sumar precio por cantidad de cada producto
    return acc + (p.price * p.quantity);
  }, 0);
});

Conceptos clave integrados: - watch: observa fuentes reactivas y ejecuta un handler al cambiar. - función anónima como fuente: necesaria para valores planos como números. - proxy de Vue: objetos y arreglos reactivos que exponen cambios internos. - reduce: agrega valores para calcular totales del carrito. - estados vinculados: priceColor y total dependen del stock y del contenido del carrito.

¿Te topaste con algún caso retador usando watch en Composition API? Cuéntalo en comentarios y comparte cómo lo resolviste.