Défilement virtuel des grandes listes
vue-virtual-scroller, RecycleScroller et rendu avec hauteur fixe ou hauteur variable des éléments
Défilement virtuel des grandes listes est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Le problème des grandes listes
Rendre des milliers de nœuds du DOM est lent et consomme beaucoup de mémoire. Le défilement virtuel ne rend que les éléments actuellement visibles dans la zone d’affichage et réutilise les nœuds du DOM pendant le défilement.
Installer vue-virtual-scroller
Une bibliothèque populaire est vue-virtual-scroller. Installez-la et importez ses styles.
npm install vue-virtual-scrollerEnregistrer le composant
Importez RecycleScroller et son CSS, puis utilisez-le dans votre composant.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";La propriété des éléments
RecycleScroller reçoit votre tableau complet de données via la propriété items. Il ne les rend jamais tous à la fois : seule la fenêtre visible est rendue.
<RecycleScroller :items="rows" />La propriété de taille des éléments
item-size indique au défileur la hauteur en pixels de chaque ligne. Avec une taille fixe, il peut calculer instantanément la plage visible et la hauteur totale du défilement.
<RecycleScroller
:items="rows"
:item-size="48"
/>La propriété d’identification
Donnez à chaque élément une identité stable avec key-field afin que les nœuds réutilisés correspondent correctement aux données.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>Modèle d’élément dans un emplacement
Utilisez l’emplacement étendu par défaut pour rendre chaque élément visible. L’emplacement expose l’item actuel.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Seuls les éléments visibles sont rendus
À mesure que vous faites défiler la liste, le défileur monte les éléments qui entrent dans la zone d’affichage et démonte ceux qui en sortent. Le nombre de nœuds du DOM reste faible, quelle que soit la longueur de la liste.
Hauteur fixe ou variable des éléments
Les hauteurs fixes sont les plus rapides, car les positions se calculent par de simples opérations arithmétiques. Lorsque la hauteur des lignes varie, vous devez utiliser une autre approche.
Gérer les hauteurs variables
Pour les hauteurs variables, utilisez DynamicScroller avec DynamicScrollerItem : ces composants mesurent les éléments rendus et ajustent leurs positions.
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>Compromis
Le défilement virtuel complique des fonctionnalités comme la recherche dans la page (Ctrl+F), les liens d’ancrage vers des éléments hors écran et l’accessibilité. Utilisez-le uniquement lorsque les listes sont réellement volumineuses.
Vérification rapide
Que rend réellement RecycleScroller dans le DOM ?
Récapitulatif
Le défilement virtuel avec RecycleScroller de vue-virtual-scroller ne rend que les éléments visibles. Transmettez les données via items, définissez item-size et key-field, puis rendez chaque ligne dans le modèle de l’v-slot. Utilisez des hauteurs fixes pour accélérer l’affichage ou DynamicScroller pour les hauteurs variables, et réservez cette technique aux listes réellement volumineuses.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Défilement virtuel des grandes listes » est-elle gratuite ?
Oui — le texte complet de « Défilement virtuel des grandes listes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Défilement virtuel des grandes listes » ?
vue-virtual-scroller, RecycleScroller et rendu avec hauteur fixe ou hauteur variable des éléments Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Défilement virtuel des grandes listes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- v-memo pour mémoriser les templates
- Analyser les performances avec l’onglet Performance de Vue DevTools
- Défilement virtuel des grandes listes
- Web Workers avec Vue