Propiedades computadas con Composition API

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:10

Propiedades computadas con Composition API

Curso de Vue.js: Componentes y Composition API

Clase 16 de 23

Clase 16 / 23

Recursos

Las funciones computadas en Composition API de Vue.js te permiten transformar datos reactivos sin saturar tu template. Aprendes a usar computed junto con ref para construir propiedades derivadas, ideal si vienes de Options API y quieres migrar a una sintaxis funcional más limpia.

Esta lectura es para desarrolladores que ya conocen reactividad básica en Vue y quieren entender cómo cambia el manejo de datos derivados al pasar al Composition API.

Qué hace una función computada en Vue.js

Una propiedad computada genera un valor que depende de otras variables reactivas y se actualiza automáticamente cuando esas dependencias cambian. Sirve para mantener tu template limpio y evitar lógica repetida en la vista.

Un caso típico es cuando recibes datos en un formato (por ejemplo, firstName y lastName por separado desde un prop o una base de datos) y necesitas mostrarlos combinados como un full name. En lugar de concatenarlos en cada lugar del template, los unificas en una sola variable computada.

¿Qué es una propiedad computada en Vue.js? Es una función que retorna un valor derivado de variables reactivas. Vue la recalcula automáticamente cuando alguna de sus dependencias cambia, sin que tú tengas que llamarla manualmente.

Cómo se escribe computed con Composition API

La sintaxis cambia respecto a Options API, pero la lógica es la misma. Empiezas importando ref y computed desde Vue, declaras tus variables reactivas y luego defines la propiedad computada como una constante que recibe una función.

El flujo se ve así:

Importa ref y computed desde Vue.
Crea las variables reactivas con ref, por ejemplo const firstName = ref('Diana') y const lastName = ref('Martínez').
Declara la propiedad computada: const fullName = computed(() => ${firstName.value} ${lastName.value}).
Devuelve firstName, lastName y fullName en el return de la función setup para que el template pueda acceder a ellas.

Fíjate en un detalle importante: dentro de la función setup no usas this. La nueva sintaxis lo hace innecesario y, además, setup se ejecuta antes del ciclo de vida del componente, así que this ni siquiera existiría en ese momento.

Por qué necesitas usar .value dentro de computed

Cuando declaras una variable con ref, Vue la envuelve en un objeto reactivo y el valor real queda en la propiedad .value. Por eso, dentro de la función computada accedes a firstName.value y lastName.value para leer su contenido actual.

Si olvidas el .value, terminarás concatenando el objeto reactivo completo en lugar del string que esperas.

¿Cuándo uso .value en Vue 3? Lo usas dentro del bloque <script setup> o dentro de la función setup siempre que accedas al contenido de una variable creada con ref. En el template no hace falta porque Vue lo desempaqueta automáticamente.

Qué cuidados debo tener con la reactividad en computed

Las funciones computadas son reactivas con base en sus dependencias, así que cualquier variable reactiva que uses dentro se vuelve parte de esa cadena. Si dentro del computed modificas otra variable que también es reactiva y depende de esta, puedes generar un loop infinito de actualizaciones.

Algunas recomendaciones prácticas:

Mantén la función computada pura: que solo lea datos y retorne un valor.
Evita ejecutar funciones que muten estado reactivo dentro del computed.
Si necesitas reaccionar a cambios con efectos secundarios, usa watch en lugar de computed.

Cómo se compara con Options API

En Options API definías las propiedades computadas dentro de un objeto, accediendo a los datos con this.firstName y this.lastName. Funciona, pero el código se llena de referencias a this y depende de un objeto JSON enorme que configura todo el componente.

Con Composition API el mismo ejemplo queda más corto, sin this, usando puro Vanilla JavaScript dentro de la función setup. La reactividad sigue intacta, pero el código se siente más legible y modular. Es el mismo concepto, expresado de forma funcional.

Te invito a tomar el ejemplo del full name y proponer otra función computada útil: un total de carrito a partir de una lista de productos, un texto formateado con mayúsculas y minúsculas, o un filtro derivado de un input. Compártelo en los comentarios y combínalo con lo que ya viste de ref, reactive y watch.