0Pricing
Vue Academy · Lekcja

Wirtualne przewijanie dużych list

vue-virtual-scroller, RecycleScroller oraz renderowanie przy stałej lub zmiennej wysokości elementów.

Wirtualne przewijanie dużych list to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Problem dużych list

Renderowanie tysięcy węzłów DOM jest powolne i wymaga dużo pamięci. Przewijanie wirtualne renderuje tylko elementy aktualnie widoczne w obszarze widoku, ponownie wykorzystując węzły DOM podczas przewijania.

Instalowanie vue-virtual-scroller

Popularną biblioteką jest vue-virtual-scroller. Należy ją zainstalować i zaimportować jej style.

npm install vue-virtual-scroller

Rejestrowanie komponentu

Należy zaimportować RecycleScroller oraz jego CSS, a następnie użyć go w komponencie.

import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

Prop items

RecycleScroller przyjmuje całą tablicę danych za pośrednictwem propsa items. Nigdy nie renderuje wszystkich elementów jednocześnie — renderuje tylko widoczny fragment.

<RecycleScroller :items="rows" />

Prop item-size

item-size informuje scroller o wysokości każdego wiersza w pikselach. Przy stałym rozmiarze może on natychmiast obliczyć widoczny zakres i całkowitą wysokość przewijania.

<RecycleScroller
  :items="rows"
  :item-size="48"
/>

Prop key-field

Należy nadać każdemu elementowi stabilną tożsamość za pomocą key-field, aby ponownie wykorzystywane węzły były prawidłowo mapowane na dane.

<RecycleScroller
  :items="rows"
  :item-size="48"
  key-field="id"
/>

Szablon elementu v-slot

Należy użyć domyślnego slotu zakresowego do renderowania każdego widocznego elementu. Slot udostępnia bieżący item.

<RecycleScroller :items="rows" :item-size="48" key-field="id">
  <template v-slot="{ item }">
    <div class="row">{{ item.name }}</div>
  </template>
</RecycleScroller>

Renderowane są tylko widoczne elementy

Podczas przewijania scroller montuje elementy wchodzące do obszaru widoku i odmontowuje te, które go opuszczają. Liczba węzłów DOM pozostaje niewielka niezależnie od długości listy.

Stała a zmienna wysokość elementów

Stałe wysokości są najszybsze, ponieważ pozycje można obliczać za pomocą prostych działań arytmetycznych. Gdy wiersze mają różne wysokości, potrzebne jest inne podejście.

Obsługa zmiennych wysokości

W przypadku zmiennych wysokości należy użyć DynamicScroller wraz z DynamicScrollerItem, który mierzy wyrenderowane elementy i dostosowuje ich pozycje.

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>

Kompromisy

Przewijanie wirtualne komplikuje funkcje takie jak wyszukiwanie na stronie (Ctrl+F), odnośniki kotwiczące do elementów poza obszarem widoku oraz dostępność. Należy używać go tylko wtedy, gdy listy są rzeczywiście duże.

Szybkie sprawdzenie

Co właściwie RecycleScroller renderuje w DOM?

Podsumowanie

Przewijanie wirtualne za pomocą RecycleScroller z biblioteki vue-virtual-scroller renderuje tylko widoczne elementy. Należy przekazać dane przez items, ustawić item-size i key-field, a każdy wiersz renderować w szablonie v-slot. Stałe wysokości zapewniają większą szybkość, natomiast w przypadku zmiennych wysokości należy użyć DynamicScroller. Tę technikę warto stosować tylko w przypadku rzeczywiście dużych list.

Często zadawane pytania

Czy lekcja „Wirtualne przewijanie dużych list” jest bezpłatna?

Tak — pełny tekst „Wirtualne przewijanie dużych list” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wirtualne przewijanie dużych list”?

vue-virtual-scroller, RecycleScroller oraz renderowanie przy stałej lub zmiennej wysokości elementów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Wirtualne przewijanie dużych list”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. v-memo do zapamiętywania szablonów
  2. Profilowanie za pomocą karty Performance w Vue DevTools
  3. Wirtualne przewijanie dużych list
  4. Web Workers z Vue
← Powrót do Vue Academy