Computed properties vs watchers en Vue

Las propiedades computadas en Vue permiten crear lógica reactiva clara y mantenible sin depender de watchers manuales. Aquí verás cómo reemplazar observadores tediosos por computed properties para derivar valores como el color del precio o el total del carrito con menos código y mayor legibilidad.

¿Qué problema resuelven las computed properties en Vue?

Las computed properties surgen cuando un watcher solo existe para derivar un nuevo valor a partir de otras propiedades reactivas. En lugar de observar cambios y asignar manualmente, una propiedad computada:

• Define una función que retorna el valor derivado.
• Se recalcula automáticamente cuando cambian sus dependencias reactivas.
• Se usa en el template como cualquier otra propiedad.

Esto elimina trabajo repetitivo y errores de sincronización. Además, Vue identifica dentro de la función todas las dependencias reactivas (por ejemplo, una propiedad product del componente) y reejecuta la función cuando cambian.

¿Cómo detecta Vue las dependencias reactivas?

• En Options API, Vue rastrea lo que esté en proxies reactivos del componente.
• En Composition API, rastrea lo que sean referencias reactivas.
• Si una dependencia cambia, la función computada se reejecuta y retorna el nuevo valor.

¿Cómo crear priceColor con propiedades computadas?

En el componente de producto, en vez de un watcher que asigna priceColor según el stock, se define una propiedad computada. Así, el color se calcula en función del stock y el valor se actualiza de forma reactiva sin asignaciones manuales.

// Options API
export default {
  // ...
  computed: {
    priceColor() {
      // Retorna azul por defecto y rojo si el stock es 1 o menos.
      return this.product.stock <= 1 ? 'red' : 'blue';
    }
  }
}

Claves prácticas: - Objetivo: derivar una propiedad reactiva nueva (por ejemplo, priceColor). - Uso: se consume como cualquier otra propiedad en el template. - Ventaja: menos código y mayor coherencia que con un watcher.

¿Cuándo conviene usar un watcher?

• Cuando necesitas efectos colaterales que no son un valor derivado.
• Cuando debes reaccionar a cambios con lógica asíncrona o externa.
• En cambio, si solo creas “una nueva propiedad dinámica”, suele ser mejor una computed.

¿Cómo calcular el total del carrito con computed y reduce?

Para el total del carrito, se puede reemplazar el watcher por una computed llamada total que retorna el acumulado usando reduce. Cada cambio en el carrito recalcula el total automáticamente.

// Options API
export default {
  // ...
  computed: {
    total() {
      // Retorna el total basado en el estado reactivo del carrito.
      // Implementa aquí lo que ya habías hecho con `reduce`.
      return this.cart.reduce(/* acumulador */);
    }
  }
}

Puntos clave: - Dependencia: this.cart es reactivo, por lo que al cambiar, total se recalcula. - Compatibilidad: si aplicas códigos de descuento, el total sigue actualizándose. - Reutilización: la lógica queda centralizada y declarativa.

¿Qué relación hay con Options API y Composition API?

• Aquí se mostró en Options API por claridad y continuidad con el ejemplo.
• El mismo enfoque se puede implementar con Composition API manteniendo el principio: derivar valores a partir de dependencias reactivas.

¿Te gustaría que el siguiente paso muestre la versión con Composition API y un ejemplo completo del reduce del carrito? Comenta qué parte quieres ver implementada paso a paso.