Scorrimento virtuale per grandi elenchi
vue-virtual-scroller, RecycleScroller, rendering con altezza fissa o variabile degli elementi.
Scorrimento virtuale per grandi elenchi è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Il problema delle liste grandi
Il rendering di migliaia di nodi DOM è lento e richiede molta memoria. Lo scorrimento virtuale esegue il rendering solo degli elementi attualmente visibili nell'area di visualizzazione e ricicla i nodi DOM durante lo scorrimento.
Installare vue-virtual-scroller
Una libreria molto utilizzata è vue-virtual-scroller. La installi e ne importi gli stili.
npm install vue-virtual-scrollerRegistrare il componente
Importi RecycleScroller e il relativo CSS, quindi lo utilizzi nel componente.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";La prop items
RecycleScroller riceve l'intero array di dati tramite la prop items. Non esegue mai il rendering di tutti gli elementi contemporaneamente, ma solo della finestra visibile.
<RecycleScroller :items="rows" />La prop item-size
item-size comunica allo scroller l'altezza in pixel di ogni riga. Con una dimensione fissa può calcolare immediatamente l'intervallo visibile e l'altezza totale dello scorrimento.
<RecycleScroller
:items="rows"
:item-size="48"
/>La prop key-field
Assegni a ogni elemento un'identità stabile tramite key-field, così i nodi riciclati vengono associati correttamente ai dati.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>Il template dell'elemento v-slot
Utilizzi lo scoped slot predefinito per eseguire il rendering di ogni elemento visibile. Lo slot espone l'item corrente.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Vengono sottoposti a rendering solo gli elementi visibili
Durante lo scorrimento, lo scroller monta gli elementi che entrano nell'area di visualizzazione e smonta quelli che ne escono. Il numero di nodi DOM rimane ridotto, indipendentemente dalla lunghezza della lista.
Altezza degli elementi fissa o variabile
Le altezze fisse sono le più veloci perché le posizioni si calcolano con semplici operazioni aritmetiche. Quando l'altezza delle righe varia, è necessario un approccio diverso.
Gestire altezze variabili
Per le altezze variabili, utilizzi DynamicScroller con DynamicScrollerItem, che misura gli elementi sottoposti a rendering e adatta le posizioni.
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>Compromessi
Lo scorrimento virtuale complica funzionalità come la ricerca nella pagina (Ctrl+F), i link di ancoraggio verso elementi fuori schermo e l'accessibilità. Lo utilizzi solo quando le liste sono effettivamente grandi.
Verifica rapida
Che cosa esegue effettivamente il rendering nel DOM RecycleScroller?
Riepilogo
Lo scorrimento virtuale con RecycleScroller di vue-virtual-scroller esegue il rendering solo degli elementi visibili. Passi i dati tramite items, imposti item-size e key-field, quindi esegua il rendering di ogni riga nel template v-slot. Utilizzi altezze fisse per ottenere prestazioni migliori oppure DynamicScroller per altezze variabili, e riservi questa tecnica alle liste effettivamente grandi.
Domande Frequenti
La lezione «Scorrimento virtuale per grandi elenchi» è gratuita?
Sì — il testo completo di «Scorrimento virtuale per grandi elenchi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Scorrimento virtuale per grandi elenchi»?
vue-virtual-scroller, RecycleScroller, rendering con altezza fissa o variabile degli elementi. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Scorrimento virtuale per grandi elenchi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- v-memo per la memoizzazione dei template
- Profilazione con la scheda Performance di Vue DevTools
- Scorrimento virtuale per grandi elenchi
- Web Worker con Vue