Computed properties en Vue y su caché

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:24

Computed properties en Vue y su caché

Curso de Vue.js

Clase 14 de 34

Clase 14 / 34

Recursos

Las computed properties en Vue son una de las tres formas de manejar reactividad y la opción ideal cuando necesitas valores derivados que se recalculen solo cuando cambian sus dependencias. Si ya conoces ref, este recurso te ayudará a optimizar el rendimiento de tus componentes sin sacrificar reactividad.

¿Qué hace computed en Vue y por qué importa?

Una computed property envuelve el retorno de una función y crea una propiedad reactiva computada. Cada vez que cambian las variables que están dentro del cuerpo de esa función, Vue vuelve a calcular el valor en el render.

La diferencia frente a un estado tradicional con ref es clave: aunque ambas son reactivas, las propiedades computadas son cacheables. Es decir, si el valor calculado sigue siendo el mismo, Vue no lo recalcula y lo mantiene constante. Eso reduce re-renders innecesarios y mejora el performance.

¿Qué significa que una computed property sea cacheable? Que Vue guarda el último valor calculado y solo lo vuelve a calcular cuando alguna de sus dependencias reactivas cambia. Si nada cambió, devuelve el valor en caché.

¿Cómo se usa computed paso a paso?

Para crear una propiedad computada importas computed desde Vue y le pasas siempre una función con el cálculo que quieres realizar [01:18]. Dentro puedes hacer tres tipos de cálculos comunes:

Reaccionar a cambios de estado, como el ancho de pantalla que muta constantemente.
Operaciones de lógica booleana que devuelven un valor según verdadero o falso.
Cálculos aritméticos basados en otras variables reactivas.

Ejemplo práctico con styleButton

En la clase se construye una variable llamada styleButton que cambia el color de los botones a rojo cuando ganas el juego. La función hace un return condicional: si win.value es verdadero, devuelve background: red; si no, devuelve un estilo vacío.

js const styleButton = computed(() => { if (win.value) { return { background: 'red' } } return {} })

Luego se aplica con un bind de estilo en los botones del template y, al llegar al número que hay que adivinar (en el ejemplo, el cinco), además de soltar el confeti, los botones cambian a rojo [02:54].

Cómo inspeccionar una computed property

Al recargar la página y abrir las herramientas de Vue, styleButton aparece dentro del setup como propiedad computada. En el DOM, los botones tienen el atributo style vacío hasta que se cumple la condición y entonces se pinta el color.

¿Cuándo conviene usar computed en vez de escribir lógica en el template? Siempre que tengas un cálculo fijo. Si lo escribes en el template, se ejecuta en cada render. Con computed, solo se recalcula cuando cambian sus dependencias.

¿Por qué computed mejora el performance de tu aplicación?

Cuando pones la lógica directamente en el template, Vue ejecuta ese cálculo en cada render del componente. Con una computed property, el cálculo solo corre si cambia una dependencia. En el ejemplo del contador, el valor era un objeto vacío la mayoría del tiempo y solo mutaba al ganar.

Esto parece poco en un juego pequeño, pero escala fuerte en aplicaciones con cientos de componentes. Usar computed de forma responsable ayuda a reducir:

Tiempos de re-render en páginas con mucha interactividad.
Bundle size y carga de cómputo en cada actualización.
Cuellos de botella en aplicaciones que manejan millones de clientes.

La recomendación final es clara: cada vez que tengas un valor derivado de otros datos reactivos, envuélvelo en una computed property en lugar de calcularlo dentro del template. Así aprovechas el caché interno de Vue y mantienes tu interfaz fluida.

¿Ya identificaste en tu proyecto qué cálculos podrías mover a computed? Cuéntame en los comentarios qué caso quieres optimizar primero.

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Computed properties en Vue y su caché