Propiedades Computadas con Composition API en Vue.js

¿Cómo crear propiedades computadas en Vue 3 con Composition API?

Las propiedades computadas en Vue 3 son una herramienta poderosa para derivados de datos reactivos sin necesidad de recalcular valores innecesariamente. Mediante la Composition API, el desarrollo de estas propiedades se vuelve aún más funcional y elegante. Vamos a explorar dos métodos para desplegar esta funcionalidad.

Método 1: Usar la función computed

El primer método para crear propiedades computadas en Composition API es emplear la función computed de Vue. La función computed facilita la utilización de propiedades que dependen de otras, recalculando solamente cuando es necesario.

import { computed } from 'vue';

export default {
  setup() {
    const priceColor = computed(() => {
      // Supongamos que tenemos acceso al "product" y su "stock"
      return product.stock <= 1 ? 'red' : 'blue';
    });

    return { priceColor };
  }
}

1. Importar computed: Primero, debemos asegurarnos de importar la función desde Vue.
2. Definir función computada: Creamos una variable priceColor usando computed, que evalúa la condición con base en el stock del producto.
3. Retornar la variable: Finalmente, retornamos priceColor para que esté disponible en el template.

Método 2: Integrar en Reactive directamente

Otro enfoque eficiente es definir propiedades computadas directamente dentro de Reactive.

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      product: {
        stock: 5,
      },
      priceColor: computed(() => {
        return state.product.stock <= 1 ? 'red' : 'blue';
      })
    });

    return { state };
  }
}

• Usar reactive: Aquí integramos computed directamente dentro de un objeto reactive.
• Definir la propiedad: priceColor se define como computada dentro del estado reactivo, eliminando la necesidad de retornarla por separado.

¿Cómo crear una propiedad computada para el total de un carrito de compras?

El uso de propiedades computadas no se limita a simples condiciones; podemos usarlas para cálculos complejos como sumar el total de un carrito.

Implementación del total del carrito

import { reactive, computed } from 'vue';

export default {
  setup() {
    const cartState = reactive({
      cart: [],
      total: computed(() => {
        return cartState.cart.reduce((sum, item) => sum + item.price, 0);
      })
    });

    return { cartState };
  }
}

1. Estado reactivo del carrito: Definimos el estado del carrito cartState con un array cart y la propiedad computada total.
2. Cálculo del total: La propiedad computada total toma el array cart y acumula los precios de cada artículo.
3. Simpleza y eficiencia: Esta estructura es eficaz para manejar actualizaciones automáticas del total al añadir o quitar productos.

¿Por qué las propiedades computadas son esenciales?

El mayor beneficio de las propiedades computadas es su habilidad para optimizar la reactividad. Evitan cómputos innecesarios controlando cuándo recalcular sus valores. Usando computed, calculas valores basados en componentes reactivos, optimizando recursos y mejorando el rendimiento. Además, el enfoque basado en funciones dentro de Composition API hace que la gestión de estas funciones como parte del ciclo de vida del componente sea más coherente y eficiente.

Ventajas de las propiedades computadas:

• Eficiencia: Solo recalculan la propiedad cuando alguna de sus dependencias cambia.
• Claridad: Describen claramente qué datos dependen de qué otros datos.
• Reusabilidad: Fácilmente integrables y utilizables en diferentes componentes.

A medida que continúas explorando Vue 3 y su Composition API, las propiedades computadas se convertirán en una herramienta indispensable. Estas facilitan el desarrollo de aplicaciones avanzadas al permitir una manipulación eficiente de la lógica reactiva. ¡Sigue practicando y explorando más posibilidades con Vue 3!