Técnicas de memoización
Evite cálculos redundantes mediante la memoización.
Técnicas de memoización es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Reducir el trabajo
El rendimiento suele mejorar cuando no se vuelven a calcular ni a renderizar elementos que no han cambiado. Vue le ofrece varias herramientas de memoización que almacenan los resultados en caché y omiten actualizaciones innecesarias.
Caché de computed
Una propiedad computed almacena su resultado en caché y solo lo vuelve a calcular cuando cambia una de sus dependencias reactivas. Esto la hace mucho más eficiente que un método que se ejecuta en cada renderizado.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Computed frente a método
Un método se ejecuta cada vez que se vuelve a renderizar la plantilla, incluso si sus entradas son idénticas. Una propiedad computed reutiliza su valor almacenado en caché, por lo que debe preferir las propiedades computed para los datos derivados que se usan en las plantillas.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once para contenido estático
La directiva v-once renderiza un elemento una sola vez y después lo omite en todas las actualizaciones futuras. Úsela para contenido que nunca cambia.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Cuándo usar v-once
Aplique v-once a secciones estáticas grandes, como un pie de página, un texto de términos o un encabezado fijo. Vue trata el resultado renderizado como estático y nunca vuelve a compararlo.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo para listas costosas
La directiva v-memo aplica memoización a un subárbol y solo lo vuelve a renderizar cuando cambian los valores de su matriz de dependencias. Es especialmente útil en listas grandes.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Cómo funciona v-memo
Cada elemento se vuelve a renderizar solo cuando cambia su matriz de memoización. Si item.selected permanece igual, Vue omite por completo el renderizado de esa fila, incluso si el componente padre se actualiza.
Evitar renderizados innecesarios
Los componentes se vuelven a renderizar cuando cambian sus datos reactivos o sus props. Mantenga los componentes pequeños y centrados para que un cambio en una zona no obligue a volver a renderizar partes no relacionadas.
Claves estables en listas
Asigne siempre a v-for una :key estable y única. Usar el índice del array como clave puede hacer que Vue reutilice los nodos DOM incorrectos y vuelva a renderizar más de lo necesario.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Mantener al mínimo los datos reactivos
Incluya datos en el estado reactivo solo si la plantilla depende de ellos. Los objetos grandes o los valores que nunca cambian en la interfaz añaden sobrecarga al seguimiento de la reactividad. Cuando corresponda, use variables simples no reactivas.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Aplicar memoización a funciones puras
Para los cálculos puros de JavaScript que están fuera de la reactividad de Vue, puede almacenar los resultados en un mapa simple para que las llamadas repetidas con la misma entrada devuelvan el resultado al instante.
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}Comprobación rápida
Compruebe sus conocimientos sobre la memoización.
Resumen
Reduzca el trabajo desperdiciado mediante la caché: las propiedades computed aplican memoización a los valores derivados, v-once renderiza el contenido estático una sola vez y v-memo omite el renderizado repetido de subárboles en listas grandes. Use claves estables y mantenga al mínimo el estado reactivo. A continuación, aprenderá a encontrar y corregir cuellos de botella de rendimiento con herramientas reales.
Preguntas frecuentes
¿La lección «Técnicas de memoización» es gratis?
Sí — el texto completo de «Técnicas de memoización» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Técnicas de memoización»?
Evite cálculos redundantes mediante la memoización. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Técnicas de memoización»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Carga diferida y división del código
- Técnicas de memoización
- Identificación y solución de cuellos de botella