0Pricing
Vue Academy · Ders

Şablon Önbellekleme için v-memo

v-memo yönergesi, bağımlılık dizisi, yeniden işleme yapılmadığı durumlar ve computed ile karşılaştırma.

Şablon Önbellekleme için v-memo, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

v-memo Nedir

v-memo, şablonun bir bölümünü önbelleğe alır. Vue, oluşturulmuş çıktıyı önbelleğe alır ve yalnızca listelenen bağımlılıklardan biri değiştiğinde o alt ağacı yeniden oluşturur. Bu, çoğunlukla sabit ve oluşturulması pahalı işaretlemeler için bir performans kaçış yoludur.

Bağımlılık Dizisi

Bir bağımlılık dizisi bağlarsınız. Dizideki her değer önceki değerine eşit kaldığı sürece Vue, öğenin tamamını ve alt öğelerini güncellemez.

<div v-memo="[dep1, dep2]">
  <!-- skipped unless dep1 or dep2 change -->
</div>

Boş Dizi

v-memo="[]" biçimindeki boş dizi, içeriğin bir kez oluşturulacağı ve bir daha güncellenmeyeceği anlamına gelir; bu, sabit içeriği tek sefer oluşturmakla eşdeğerdir.

<div v-memo="[]">
  <!-- rendered once, never re-rendered -->
</div>

Birincil Kullanım Alanı: v-for

v-memo kullanmanın temel nedeni çok büyük listelerdir. Her satırın yalnızca kendisiyle ilgili veriler değiştiğinde yeniden oluşturulması için bunu v-for içinde kullanın.

<div
  v-for="item in list"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  ...
</div>

Seçili Satırı Önbelleğe Alma

Klasik örnekte, binlerce satır yalnızca seçili durumları değiştiğinde yeniden oluşturulur. item.id === selectedId karşılaştırması, bir satırın yalnızca seçildiğinde veya seçimi kaldırıldığında güncellenmesini sağlar.

<tr
  v-for="item in items"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  <td :class="{ active: item.id === selectedId }">
    {{ item.name }}
  </td>
</tr>

Tüm Reaktif Bağımlılıkları Listeleme

Alt ağacın bağlı olduğu her reaktif değeri eklemelisiniz. Birini unutursanız öğe, o değer değiştiğinde güncellenmez; bu da fark edilmesi zor, eski arayüz verilerine yol açan bir hatadır.

<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>

v-if ile Asla Birleştirmeyin

v-memo yönergesini, v-if veya v-for'un yapısal yönergeleriyle çakışacak şekilde aynı öğeye yerleştirmeyin. Özellikle aynı öğede v-memo ve v-if desteklenmez ve tanımsız davranışa yol açar.

<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>

v-memo ve Türetilmiş Değer Karşılaştırması

Bir computed işlevi, reaktif durumdan türetilen bir değeri önbelleğe alır. v-memo ise oluşturulmuş sanal düğümleri önbelleğe alır. Farklı sorunları çözerler: computed verilerin yeniden hesaplanmasını, v-memo ise işaretlemelerin yeniden oluşturulmasını önler.

computed Ne Zaman Yeterlidir

Darboğazınız verileri yeniden hesaplamaksa (filtreleme, sıralama, biçimlendirme), önce computed kullanın; daha basittir ve yanlış kullanılma olasılığı daha düşüktür.

import { computed } from "vue";

const sorted = computed(() =>
  [...items.value].sort((a, b) => a.rank - b.rank)
);

v-memo Ne Zaman Faydalıdır

Yalnızca performans profili, büyük bir listenin yeniden oluşturulmasının baskın maliyet olduğunu ve güncellemeler arasında satırların çoğunun değişmediğini gösterdiğinde v-memo kullanın.

Önce Ölçün

v-memo bellek ek yükü ve karşılaştırma maliyeti getirir. Küçük listelerde düz oluşturmadan daha yavaş olabilir. Gerçek bir kazanım elde edildiğini doğrulamak için her zaman öncesinde ve sonrasında performans profili çıkarın.

Hızlı Kontrol

v-memo ne zaman doğru araçtır?

Özet

v-memo="[deps]", listelenen tüm bağımlılıklar değişmeden kaldığı sürece bir alt ağacın yeniden oluşturulmasını engeller; büyük v-for listelerinin içinde kullanmak için idealdir. Her reaktif bağımlılığı listeleyin, aynı öğede v-if ile asla birleştirmeyin, türetilmiş değerler için computed kullanmayı tercih edin ve gerçek bir performans kazanımını doğrulamak için her zaman profil oluşturun.

Sıkça Sorulan Sorular

“Şablon Önbellekleme için v-memo” dersi ücretsiz mi?

Evet — “Şablon Önbellekleme için v-memo” 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.

“Şablon Önbellekleme için v-memo” dersinde ne öğreneceğim?

v-memo yönergesi, bağımlılık dizisi, yeniden işleme yapılmadığı durumlar ve computed ile karşılaştırma. 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 1. dersidir.

“Şablon Önbellekleme için v-memo” 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