Vue 9: Propiedades computadas
easy⏱ 5 mincoursevue
Estado derivado y cacheado
Una computed deriva un valor de otro estado reactivo y se vuelve a ejecutar automáticamente solo cuando sus dependencias cambian — a diferencia de un método, su resultado queda cacheado entre renders. En un archivo .vue real (Options API) vive en el bloque computed; en Composition API llamás a computed(() => ...).
<!-- ProductCard.vue -->
<script>
export default {
props: ['price', 'qty'],
computed: {
total() {
return (this.price * this.qty).toFixed(2);
},
},
};
</script>
<template>
<p>Total: {{ '$' + total }}</p>
</template>
computed vs. un método simple
Un método llamado desde el template (total()) se re-ejecuta en cada re-render del componente, sin importar el motivo. Una propiedad computada (total) solo se re-ejecuta cuando price o qty realmente cambian, devolviendo el valor cacheado en caso contrario — para derivaciones costosas, esa diferencia importa mucho.
computed: {
total() { return this.price * this.qty; } // cached
},
methods: {
totalMethod() { return this.price * this.qty; } // recalculated every render
}
Construí la línea de factura
En data(), agregá price y qty. Agregá una computed total que los multiplique (formateada con .toFixed(2)), y un botón que incremente qty para ver reaccionar el valor computado.