Computed en Vue Composition API

Las propiedades computadas en Vue con el Composition API permiten reemplazar watchers innecesarios y simplificar la lógica reactiva. Aquí verás cómo usar la función computed para derivar valores como el color del precio según stock y el total del carrito, manteniendo el código claro, predecible y fácil de mantener.

¿Cómo crear propiedades computadas con Composition API?

Para crear una propiedad computada en Composition API se importa la función computed desde Vue y se define una función que depende de datos reactivos. Si esas dependencias cambian, la propiedad se recalcula automáticamente.

• Importar y definir con función pura.
• Basar el cálculo en dependencias reactivas.
• Exponer la variable cuando no está dentro de reactive.

¿Qué hace computed y cuándo se recalcula?

La función computed recibe una función que usa dependencias reactivas. Si alguna cambia (por ejemplo, el stock del producto), el valor computado se actualiza sin necesidad de un watcher manual.

Ejemplo como variable independiente (se debe retornar en el estado):

import { computed } from 'vue'

const priceColor = computed(() => {
  // si el stock es menor o igual a 1: rojo, si no: azul
  return props.product.stock <= 1 ? 'red' : 'blue'
})

// ...luego exponerla en el return del setup
return { priceColor }

¿Cómo exponer la propiedad en el estado?

Si la propiedad computada se crea como variable (fuera de reactive), hay que retornarla en el estado del componente. Esto reemplaza al watcher que antes modificaba el color del precio y mantiene la lógica declarativa.

¿Cómo definir computed dentro de reactive?

También se puede definir la propiedad computada directamente dentro de un objeto reactive. En este caso, no necesitas retornarla por separado porque ya forma parte del estado.

• Declaración inline con operador ternario.
• Menos código repetido al no retornarla explícitamente.
• Lectura directa desde el estado reactivo.

Ejemplo dentro del estado del producto:

import { reactive, computed } from 'vue'

const productState = reactive({
  // otras propiedades del producto...
  priceColor: computed(() => (props.product.stock <= 1 ? 'red' : 'blue')),
})

// productState ya se retorna, no hace falta exponer priceColor aparte

Beneficios clave:

• Menos boilerplate al integrar la lógica en el estado.
• Reactividad predecible: se recalcula según sus dependencias.
• Legibilidad: la intención queda cerca de los datos.

¿Cómo calcular el total del carrito con una propiedad computada?

El watcher general que observaba el carrito se puede comentar y reemplazar por una propiedad computada llamada total. La idea: usar una reducción para sumar los montos de los ítems.

• Crear total como variable computada y retornarla.
• O definir total directamente dentro de reactive del carrito.
• Mantener el cálculo declarativo y derivado de sus dependencias.

Como variable independiente:

import { computed } from 'vue'

const total = computed(() =>
  // sumar el monto de cada ítem del carrito
  cartState.cart.reduce((acc, item) => acc + /* valor del ítem */, 0)
)

return { total }

Dentro del estado del carrito:

import { reactive, computed } from 'vue'

const cartState = reactive({
  cart: [],
  total: computed(() =>
    cartState.cart.reduce((acc, item) => acc + /* valor del ítem */, 0)
  ),
})

// no es necesario retornar total por separado

Palabras clave y habilidades aplicadas:

• Composition API y Options API: enfoques para organizar la reactividad.
• computed: derivar valores a partir de dependencias reactivas.
• reactive: agrupar estado y propiedades computadas en un mismo objeto.
• watcher: evitado cuando la lógica puede escribirse como propiedad computada.
• Dependencias reactivas: disparan el recálculo automático.
• Operador ternario: simplifica condiciones como stock bajo/alto.
• reduce: cálculo del total del carrito de forma declarativa.

¿Te gustaría ver ejemplos con más condiciones, como descuentos en el total o colores por rangos de stock? Deja tu comentario y cuéntame qué casos prácticos quieres resolver.