Scroll Virtual untuk Daftar Besar
vue-virtual-scroller, RecycleScroller, serta perenderan dengan tinggi item tetap vs bervariasi.
Scroll Virtual untuk Daftar Besar adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Masalah Daftar Besar
Merender ribuan simpul DOM lambat dan menghabiskan banyak memori. Pengguliran virtual hanya merender elemen yang sedang terlihat di area pandang, lalu menggunakan kembali simpul DOM saat Anda menggulir.
Memasang vue-virtual-scroller
Pustaka yang populer adalah vue-virtual-scroller. Pasang pustaka tersebut dan impor gayanya.
npm install vue-virtual-scrollerMendaftarkan Komponen
Impor RecycleScroller dan CSS-nya, lalu gunakan di komponen Anda.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";Properti items
RecycleScroller menerima seluruh larik data Anda melalui properti items. Komponen ini tidak pernah merender semuanya sekaligus—hanya jendela yang terlihat.
<RecycleScroller :items="rows" />Properti item-size
item-size memberi tahu penggulir tinggi piksel setiap baris. Dengan ukuran tetap, komponen ini dapat segera menghitung rentang yang terlihat dan tinggi total pengguliran.
<RecycleScroller
:items="rows"
:item-size="48"
/>Properti key-field
Berikan identitas yang stabil kepada setiap elemen dengan key-field agar simpul yang digunakan kembali dipetakan dengan benar ke data.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>Templat Item v-slot
Gunakan slot terbatas bawaan untuk merender setiap elemen yang terlihat. Slot tersebut menyediakan item yang sedang ditampilkan.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Hanya Elemen yang Terlihat yang Dirender
Saat Anda menggulir, penggulir memasang elemen yang memasuki area pandang dan melepas elemen yang keluar. Jumlah simpul DOM tetap sedikit, berapa pun panjang daftarnya.
Tinggi Elemen Tetap vs. Bervariasi
Tinggi tetap paling cepat karena posisinya dihitung dengan aritmetika sederhana. Jika tinggi baris berbeda-beda, Anda memerlukan pendekatan lain.
Menangani Tinggi yang Bervariasi
Untuk tinggi yang bervariasi, gunakan DynamicScroller dengan DynamicScrollerItem, yang mengukur elemen yang dirender dan menyesuaikan posisinya.
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>Pertimbangan
Pengguliran virtual memperumit fitur seperti pencarian di halaman (Ctrl+F), tautan jangkar ke elemen di luar layar, dan aksesibilitas. Gunakan teknik ini hanya jika daftar benar-benar besar.
Pemeriksaan Singkat
Apa yang sebenarnya dirender RecycleScroller ke DOM?
Ringkasan
Pengguliran virtual dengan RecycleScroller dari vue-virtual-scroller hanya merender elemen yang terlihat. Teruskan data melalui items, tetapkan item-size dan key-field, lalu render setiap baris dalam templat v-slot. Gunakan tinggi tetap untuk kecepatan, atau DynamicScroller untuk tinggi yang bervariasi, dan gunakan teknik ini hanya untuk daftar yang benar-benar besar.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Scroll Virtual untuk Daftar Besar” gratis?
Ya — teks lengkap “Scroll Virtual untuk Daftar Besar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Scroll Virtual untuk Daftar Besar”?
vue-virtual-scroller, RecycleScroller, serta perenderan dengan tinggi item tetap vs bervariasi. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Scroll Virtual untuk Daftar Besar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- v-memo untuk Memoisasi Template
- Membuat Profil dengan Tab Performa Vue DevTools
- Scroll Virtual untuk Daftar Besar
- Web Worker dengan Vue