Virtuell scrolling for store lister
vue-virtual-scroller, RecycleScroller og rendering med fast eller variabel elementhøyde.
Virtuell scrolling for store lister er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Problemet med store lister
Det er tregt og minnekrevende å gjengi tusenvis av DOM-noder. Med virtuell rulling gjengis bare elementene som for øyeblikket er synlige i visningsområdet, og DOM-nodene gjenbrukes mens De ruller.
Installere vue-virtual-scroller
Et populært bibliotek er vue-virtual-scroller. Installer det, og importer stilene.
npm install vue-virtual-scrollerRegistrere komponenten
Importer RecycleScroller og CSS-en til den, og bruk den deretter i komponenten.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";Prop-en items
RecycleScroller tar imot hele datamatrisen via prop-en items. Den gjengir aldri alle elementene samtidig – bare det synlige vinduet.
<RecycleScroller :items="rows" />Prop-en item-size
item-size forteller scrolleren høyden i piksler for hver rad. Med en fast størrelse kan den beregne det synlige området og den totale rullehøyden umiddelbart.
<RecycleScroller
:items="rows"
:item-size="48"
/>Prop-en key-field
Gi hvert element en stabil identitet med key-field, slik at de gjenbrukte nodene kobles riktig til dataene.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>Elementmalen i v-slot
Bruk standard-området for scoped slots til å gjengi hvert synlige element. Slot-en eksponerer det gjeldende item.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Bare synlige elementer gjengis
Når De ruller, monterer scrolleren elementer som kommer inn i visningsområdet, og avmonterer dem som forlater det. Antallet DOM-noder forblir lavt, uansett hvor lang listen er.
Fast eller variabel elementhøyde
Faste høyder er raskest fordi posisjonene beregnes med ren aritmetikk. Når radene har ulik høyde, trenger De en annen tilnærming.
Håndtere variable høyder
For variable høyder kan De bruke DynamicScroller sammen med DynamicScrollerItem. Disse måler gjengitte elementer og justerer posisjonene.
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>Avveininger
Virtuell rulling gjør funksjoner som søk på siden (Ctrl+F), ankerlenker til elementer utenfor skjermen og tilgjengelighet mer kompliserte. Bruk det bare når listene faktisk er store.
Hurtigsjekk
Hva er det RecycleScroller faktisk gjengir i DOM-en?
Oppsummering
Virtuell rulling med RecycleScroller fra vue-virtual-scroller gjengir bare synlige elementer. Send inn dataene via items, angi item-size og key-field, og gjengi hver rad i v-slot-malen. Bruk faste høyder for best ytelse, eller DynamicScroller for variable høyder, og begrens teknikken til faktisk store lister.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Virtuell scrolling for store lister» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Virtuell scrolling for store lister», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Virtuell scrolling for store lister»?
vue-virtual-scroller, RecycleScroller og rendering med fast eller variabel elementhøyde. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Virtuell scrolling for store lister»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- v-memo for memoization i templates
- Profilering med ytelsesfanen i Vue DevTools
- Virtuell scrolling for store lister
- Web Workers med Vue