Desplazamiento virtual para listas grandes
vue-virtual-scroller, RecycleScroller y renderizado con altura fija o variable de elementos
Desplazamiento virtual para listas grandes es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.
El problema de las listas grandes
Renderizar miles de nodos del DOM es lento y consume mucha memoria. El desplazamiento virtual solo renderiza los elementos visibles actualmente en el área de visualización y recicla los nodos del DOM a medida que se desplaza.
Instalar vue-virtual-scroller
Una biblioteca popular es vue-virtual-scroller. Instálela e importe sus estilos.
npm install vue-virtual-scrollerRegistrar el componente
Importe RecycleScroller y su CSS, y después utilícelo en su componente.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";La prop items
RecycleScroller recibe todo el array de datos mediante la prop items. Nunca los renderiza todos a la vez: solo renderiza la ventana visible.
<RecycleScroller :items="rows" />La prop item-size
item-size indica al scroller la altura en píxeles de cada fila. Con un tamaño fijo, puede calcular al instante el rango visible y la altura total del desplazamiento.
<RecycleScroller
:items="rows"
:item-size="48"
/>La prop key-field
Asigne a cada elemento una identidad estable mediante key-field para que los nodos reciclados se correspondan correctamente con los datos.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>La plantilla de elementos v-slot
Utilice el slot con ámbito predeterminado para renderizar cada elemento visible. El slot expone el item actual.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Solo se renderizan los elementos visibles
A medida que se desplaza, el scroller monta los elementos que entran en el área de visualización y desmonta los que salen de ella. El número de nodos del DOM se mantiene reducido, independientemente de la longitud de la lista.
Altura fija frente a variable de los elementos
Las alturas fijas son las más rápidas porque las posiciones se calculan mediante operaciones aritméticas. Cuando las filas tienen alturas variables, necesita otro enfoque.
Gestionar alturas variables
Para las alturas variables, utilice DynamicScroller con DynamicScrollerItem, que mide los elementos renderizados y ajusta sus posiciones.
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
<template v-slot="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<div>{{ item.text }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>Compromisos
El desplazamiento virtual complica funciones como la búsqueda en la página (Ctrl+F), los enlaces de anclaje a elementos fuera de la pantalla y la accesibilidad. Utilícelo solo cuando las listas sean realmente grandes.
Comprobación rápida
¿Qué renderiza realmente RecycleScroller en el DOM?
Recapitulación
El desplazamiento virtual con vue-virtual-scroller y su RecycleScroller solo renderiza los elementos visibles. Pase los datos mediante items, establezca item-size y key-field, y renderice cada fila en la plantilla v-slot. Utilice alturas fijas para obtener mayor velocidad o DynamicScroller para alturas variables, y reserve esta técnica para listas realmente grandes.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Desplazamiento virtual para listas grandes» es gratis?
Sí — el texto completo de «Desplazamiento virtual para listas grandes» 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 «Desplazamiento virtual para listas grandes»?
vue-virtual-scroller, RecycleScroller y renderizado con altura fija o variable de elementos 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 3 de 4.
¿Cuánto tiempo toma la lección «Desplazamiento virtual para listas grandes»?
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