Virtuelles Scrollen für große Listen
vue-virtual-scroller, RecycleScroller sowie Rendering mit fester oder variabler Elementhöhe
Virtuelles Scrollen für große Listen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem großer Listen
Das Rendern von Tausenden DOM-Knoten ist langsam und speicherintensiv. Virtuelles Scrollen rendert nur die Elemente, die momentan im Viewport sichtbar sind, und verwendet DOM-Knoten beim Scrollen wieder.
vue-virtual-scroller installieren
Eine beliebte Bibliothek ist vue-virtual-scroller. Installieren Sie sie und importieren Sie ihre Styles.
npm install vue-virtual-scrollerDie Komponente registrieren
Importieren Sie RecycleScroller und dessen CSS und verwenden Sie die Komponente anschließend in Ihrer Komponente.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";Die items-Prop
RecycleScroller erhält Ihr vollständiges Datenarray über die items-Prop. Die Komponente rendert niemals alle Elemente gleichzeitig, sondern nur das sichtbare Fenster.
<RecycleScroller :items="rows" />Die item-size-Prop
item-size teilt dem Scroller die Pixelhöhe jeder Zeile mit. Bei einer festen Größe kann er den sichtbaren Bereich und die gesamte Scrollhöhe sofort berechnen.
<RecycleScroller
:items="rows"
:item-size="48"
/>Die key-field-Prop
Geben Sie jedem Element mit key-field eine stabile Identität, damit wiederverwendete Knoten korrekt den Daten zugeordnet werden.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>Das v-slot-Item-Template
Verwenden Sie den standardmäßigen Scoped Slot, um jedes sichtbare Element zu rendern. Der Slot stellt das aktuelle item bereit.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Nur sichtbare Elemente werden gerendert
Beim Scrollen bindet der Scroller Elemente ein, die in den Viewport gelangen, und entfernt diejenigen, die ihn verlassen. Die Anzahl der DOM-Knoten bleibt unabhängig von der Listenlänge gering.
Feste oder variable Elementhöhe
Feste Höhen sind am schnellsten, weil die Positionen rein arithmetisch berechnet werden. Wenn die Zeilen unterschiedlich hoch sind, benötigen Sie einen anderen Ansatz.
Variable Höhen verarbeiten
Für variable Höhen verwenden Sie DynamicScroller mit DynamicScrollerItem. Diese Komponenten messen gerenderte Elemente und passen die Positionen entsprechend an.
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>Abwägungen
Virtuelles Scrollen erschwert Funktionen wie die Seitensuche (Strg+F), Ankerlinks zu nicht sichtbaren Elementen und Barrierefreiheit. Verwenden Sie es nur, wenn Listen tatsächlich sehr groß sind.
Kurze Überprüfung
Was rendert RecycleScroller tatsächlich in das DOM?
Zusammenfassung
Virtuelles Scrollen mit dem RecycleScroller von vue-virtual-scroller rendert nur sichtbare Elemente. Übergeben Sie die Daten über items, legen Sie item-size und key-field fest und rendern Sie jede Zeile im v-slot-Template. Verwenden Sie feste Höhen für eine hohe Geschwindigkeit oder DynamicScroller für variable Höhen und setzen Sie diese Technik nur bei tatsächlich sehr großen Listen ein.
Häufig gestellte Fragen
Ist die Lektion „Virtuelles Scrollen für große Listen“ kostenlos?
Ja — der vollständige Text von „Virtuelles Scrollen für große Listen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Virtuelles Scrollen für große Listen“?
vue-virtual-scroller, RecycleScroller sowie Rendering mit fester oder variabler Elementhöhe Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Virtuelles Scrollen für große Listen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- v-memo zur Template-Memoisierung
- Profiling mit dem Performance-Tab der Vue Devtools
- Virtuelles Scrollen für große Listen
- Web Worker mit Vue