0Pricing
Vue Academy · Ders

Büyük Listeler için Sanal Kaydırma

vue-virtual-scroller, RecycleScroller ve sabit öğe yüksekliği ile değişken yükseklikte işlemenin düzeltilmesi.

Büyük Listeler için Sanal Kaydırma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Büyük Liste Sorunu

Binlerce DOM düğümünü oluşturmak yavaştır ve çok bellek tüketir. Sanal kaydırma, yalnızca görüntü alanında o anda görünen öğeleri oluşturur ve siz kaydırdıkça DOM düğümlerini yeniden kullanır.

vue-virtual-scroller'ı Yükleme

Popüler bir kitaplık vue-virtual-scroller'dır. Bu kitaplığı yükleyin ve stillerini içe aktarın.

npm install vue-virtual-scroller

Bileşeni Kaydetme

RecycleScroller ve CSS'sini içe aktarın, ardından bileşeninizde kullanın.

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

items Özelliği

RecycleScroller, veri dizinizin tamamını items özelliğiyle alır. Bunların tümünü aynı anda oluşturmaz; yalnızca görünür pencereyi oluşturur.

<RecycleScroller :items="rows" />

item-size Özelliği

item-size, kaydırıcıya her satırın piksel cinsinden yüksekliğini bildirir. Sabit bir boyutla görünür aralığı ve toplam kaydırma yüksekliğini anında hesaplayabilir.

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

key-field Özelliği

Yeniden kullanılan düğümlerin verilerle doğru eşleşmesi için her öğeye key-field ile kararlı bir kimlik verin.

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

v-slot Öğe Şablonu

Görünür her öğeyi oluşturmak için varsayılan kapsamlı yuvayı kullanın. Yuva, geçerli item değerini sunar.

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

Yalnızca Görünür Öğeler Oluşturulur

Kaydırdıkça kaydırıcı, görüntü alanına giren öğeleri bağlar ve çıkan öğelerin bağlantısını kaldırır. Liste ne kadar uzun olursa olsun DOM düğümü sayısı düşük kalır.

Sabit ve Değişken Öğe Yüksekliği

Sabit yükseklikler en hızlı seçenektir; çünkü konumlar yalnızca aritmetik işlemlerle hesaplanır. Satırların yüksekliği değiştiğinde farklı bir yaklaşım gerekir.

Değişken Yükseklikleri Yönetme

Değişken yükseklikler için oluşturulan öğeleri ölçen ve konumları ayarlayan DynamicScroller ile DynamicScrollerItem kullanın.

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>

Ödünler

Sanal kaydırma; sayfa içi bulma (Ctrl+F), ekran dışında kalan öğelere bağlantı veren sabitleyiciler ve erişilebilirlik gibi özellikleri karmaşıklaştırır. Bunu yalnızca listeler gerçekten büyük olduğunda kullanın.

Kısa Kontrol

RecycleScroller gerçekte DOM'a ne oluşturur?

Özet

vue-virtual-scroller içindeki RecycleScroller ile sanal kaydırma yalnızca görünür öğeleri oluşturur. Verileri items ile geçirin, item-size ve key-field değerlerini ayarlayın, her satırı v-slot şablonunda oluşturun. Hız için sabit yükseklikler kullanın; yükseklikler değişkense DynamicScroller kullanın ve bu tekniği gerçekten büyük listelerle sınırlayın.

Sıkça Sorulan Sorular

“Büyük Listeler için Sanal Kaydırma” dersi ücretsiz mi?

Evet — “Büyük Listeler için Sanal Kaydırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Büyük Listeler için Sanal Kaydırma” dersinde ne öğreneceğim?

vue-virtual-scroller, RecycleScroller ve sabit öğe yüksekliği ile değişken yükseklikte işlemenin düzeltilmesi. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Büyük Listeler için Sanal Kaydırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Şablon Önbellekleme için v-memo
  2. Vue DevTools Performans Sekmesiyle Profil Oluşturma
  3. Büyük Listeler için Sanal Kaydırma
  4. Vue ile Web Worker'lar
← Vue Academy Sayfasına Dön