Watchers en Vue Options API

Domina los cambios en tus datos con watchers en Vue. A partir de las propiedades reactivas que Vue gestiona con proxies, aquí se muestra cómo observar dependencias y reaccionar con precisión: desde cambiar estilos según el stock hasta calcular el total del carrito con observación profunda en la Options API. También se anticipa su uso en la Composition API.

¿Cómo funcionan los watchers en Vue Options API?

Los watchers permiten observar propiedades reactivas y ejecutar efectos colaterales controlados. En cada observador, Vue pasa el valor actual y el valor anterior, lo que facilita entender el cambio.

• Observa un índice activo como activeImage para ver value y oldValue en consola.
• Útil para depurar cambios en UI, por ejemplo, al alternar thumbnails.

export default {
  // ...
  watch: {
    activeImage(value, oldValue) {
      console.log(value, oldValue);
    }
  }
}

Ideas clave: - watch en la Options API escucha cualquier propiedad reactiva disponible. - Recibe (valorActual, valorAnterior) para lógica condicional precisa.

¿Cómo cambiar el color del precio según el stock?

Se liga un estilo dinámico al precio y se actualiza con un watch de una ruta específica: 'product.stock'. Si el stock es menor o igual a 1, el color pasa de azul a rojo.

<template>
  <p :style="{ color: priceColor }">{{ precio }}</p>
</template>

<script>
export default {
  data() {
    return {
      priceColor: 'rgb(0, 0, 255)' // valor RGB azul.
    };
  },
  watch: {
    'product.stock'(stock) {
      if (stock <= 1) this.priceColor = 'rgb(255, 0, 0)'; // cambia a rojo.
    }
  }
};
</script>

Puntos a reforzar: - Rutas con string en watch como 'product.stock' para escuchar propiedades anidadas. - Estilos reactivos con :style que reflejan el estado del negocio de forma inmediata. - Reutilización del componente: el cambio de color se replica donde se use.

¿Cómo calcular el total del carrito con un watcher profundo?

Para un carrito que es un arreglo con objetos, se requiere un watch con observación profunda. Así cualquier cambio interno activa el cálculo del total con reduce.

<template>
  <p>{{ new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(total) }}</p>
</template>

<script>
export default {
  data() {
    return {
      cart: [],
      total: 0
    };
  },
  watch: {
    cart: {
      handler(newCart) {
        this.total = newCart.reduce((sum, p) => sum + p.price * p.quantity, 0);
      },
      deep: true // observa objetos y propiedades internas.
    }
  }
};
</script>

Claves técnicas y de diseño: - Usa objeto con handler y deep: true para arreglos de objetos donde cambian propiedades internas. - reduce suma precios por cantidades de cada producto del carrito. - Formatea con la Internationalization API de JavaScript: Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }) para pesos colombianos. - La reactividad mantiene el total correcto incluso al aplicar descuentos o modificar cantidades.

¿Te gustaría ver esta misma lógica con la Composition API o aplicar validaciones adicionales al carrito? Comparte tus dudas y casos en los comentarios.