v-memo para memorizar plantillas
Directiva v-memo, matriz de dependencias, casos en los que se omite el renderizado y comparación con computed
v-memo para memorizar plantillas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. 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 4 lecciones en total.
Qué es v-memo
v-memo memoriza una sección de la plantilla. Vue almacena en caché la salida renderizada y solo vuelve a renderizar ese subárbol cuando cambia una de las dependencias indicadas. Es una alternativa de optimización para marcado costoso y mayormente estático.
El array de dependencias
Enlaza un array de dependencias. Mientras todos los valores del array sean iguales a sus valores anteriores, Vue omite la actualización del elemento completo y de sus elementos secundarios.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Un array vacío
Un array vacío v-memo="[]" significa que el contenido se renderiza una vez y nunca se actualiza; equivale a renderizar contenido estático una sola vez.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>El caso de uso principal: v-for
El motivo principal para usar v-memo son las listas enormes. Colóquelo dentro de v-for para que cada fila solo se vuelva a renderizar cuando cambien sus propios datos relevantes.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Memorizar la fila seleccionada
En el ejemplo clásico, miles de filas solo se vuelven a renderizar cuando cambia su estado de selección. Comparar item.id === selectedId significa que una fila solo se actualiza cuando se selecciona o deja de estar seleccionada.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Enumerar todas las dependencias reactivas
Debe incluir todos los valores reactivos de los que depende el subárbol. Si olvida uno, el elemento no se actualizará cuando cambie ese valor, lo que provocará un error sutil de interfaz obsoleta.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>No combinar con v-if
No coloque v-memo en el mismo elemento que v-if ni lo combine de forma conflictiva con las directivas estructurales de v-for. En concreto, v-memo y v-if en el mismo elemento no son compatibles y producen un comportamiento no definido.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo frente a computed
Un computed almacena en caché un valor derivado del estado reactivo. v-memo almacena en caché VNodes renderizados. Resuelven problemas distintos: computed evita recalcular datos y v-memo evita volver a renderizar el marcado.
Cuándo es suficiente computed
Si el cuello de botella está en recalcular datos (filtrar, ordenar o dar formato), use primero computed: es más sencillo y más difícil de usar incorrectamente.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Cuándo ayuda v-memo
Use v-memo únicamente cuando el análisis de rendimiento muestre que volver a renderizar una lista grande es la operación dominante y la mayoría de las filas no cambien entre actualizaciones.
Mida primero
v-memo añade sobrecarga de memoria y un coste de comparación. En listas pequeñas puede ser más lento que el renderizado normal. Mida siempre antes y después para confirmar que se obtiene una mejora real.
Comprobación rápida
¿Cuándo es v-memo la herramienta adecuada?
Resumen
v-memo="[deps]" omite volver a renderizar un subárbol mientras todas las dependencias indicadas permanezcan sin cambios; es ideal dentro de listas grandes con v-for. Enumere todas las dependencias reactivas, nunca lo combine con v-if en el mismo elemento, prefiera computed para los valores derivados y mida siempre para confirmar una mejora de rendimiento real.
Preguntas frecuentes
¿La lección «v-memo para memorizar plantillas» es gratis?
Sí — el texto completo de «v-memo para memorizar plantillas» 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 4 lecciones en total.
¿Qué aprenderé en «v-memo para memorizar plantillas»?
Directiva v-memo, matriz de dependencias, casos en los que se omite el renderizado y comparación con computed 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 1 de 4.
¿Cuánto tiempo toma la lección «v-memo para memorizar plantillas»?
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
- v-memo para memorizar plantillas
- Perfilado con la pestaña Performance de Vue DevTools
- Desplazamiento virtual para listas grandes
- Web Workers con Vue