KeepAlive

KeepAlive

`` bileşeni, birden çok bileşen arasında dinamik geçiş yaparken bileşen örneklerini koşullu olarak önbelleklememizi sağlar. — Vue Documentation

Temel Kullanım

Bileşen Temelleri bölümünde, özel elemanını kullanarakDinamik Bileşenler için sözdizimini tanıttık:

<component :is="activeComponent" />

Varsayılan olarak, bir aktif bileşen örneği, ona geçiş yapıldığında kaldırılır. Bu durum, içerdiği değiştirilen durumun kaybolmasına neden olur. Bu bileşen tekrar görüntülendiğinde, yalnızca başlangıç durumu ile yeni bir örnek oluşturulacaktır.

Aşağıdaki örnekte, birini güncellemeyi deneyin, dışarıya geçin ve ardından tekrar geri dönün:

Geri dönüldüğünde, önceki değiştirilen durumun sıfırlandığını fark edeceksiniz.

Geçiş sırasında taze bileşen örneği oluşturmak genellikle yararlıdır, ancak bu durumda, her iki bileşen örneğinin de inaktif olduklarında bile korunmasını istiyoruz. Bu sorunu çözmek için dinamik bileşenimizi yerleşik bileşeni ile sarmalayabiliriz:

<!-- İnatçı bileşenler önbelleğe alınacaktır! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Artık durum, bileşen geçişleri arasında kalıcı hale gelecektir:

Playground'da deneyin

Playground'da deneyin

ipucu

in-DOM şablonları kullanıldığında, olarak referans verilmelidir.

Dahil Et / Hariç Tut

Varsayılan olarak, `içindeki herhangi bir bileşen örneğini önbelleğe alır. Davranışıincludeveexcludeprop'ları ile özelleştirebiliriz. Her iki prop da virgülle ayrılmış bir dize, birRegExp` veya bu iki türü içeren bir dizi olabilir:

<!-- virgülle ayrılmış dize -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (v-bind kullanın) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Dizi (v-bind kullanın) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

Eşleşme, bileşenin name seçeneği ile kontrol edildiği için, KeepAlive tarafından koşullu olarak önbelleklenmesi gereken bileşenler açık bir name seçeneği beyan etmelidir.

ipucu

3.2.34 sürümünden itibaren, `kullanan tek dosya bileşeni, dosya adına bağlı olarakname` seçeneğini otomatik olarak çıkarır, bu nedenle adı manuel olarak beyan etme ihtiyacı ortadan kalkar.

Maksimum Önbelleklenmiş Örnekler

max prop'u ile önbelleğe alınabilecek bileşen örneklerinin maksimum sayısını sınırlayabiliriz. max belirtildiğinde, `birLRU önbelleği`>) gibi davranır: önbelleğe alınan örneklerin sayısı belirtilen maksimum sayıyı aşmak üzereyse, en az erişilen önbelleklenmiş örnek, yeni örnekler için yer açmak amacıyla yok edilir.

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

Önbelleklenmiş Örneklerin Yaşam Döngüsü

Bir bileşen örneği DOM'dan kaldırıldığında ancak `` tarafından önbelleklenmiş bir bileşen ağacının parçası olduğunda, deactivate durumuna geçer. Bir bileşen örneği, önbellekteki ağaç parçası olarak DOM'a eklendiğinde, active olur.

Bir kept-alive bileşeni, bu iki durum için yaşam döngüsü kancaları kaydedebilir, onActivated() ve onDeactivated():

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // ilk montajda çağrılır
  // ve önbellekten her yeniden yerleştirildiğinde
})

onDeactivated(() => {
  // DOM'dan önbelleğe kaldırıldığında ve
  // ayrıca monte edilmediğinde çağrılır
})
</script>

Bir kept-alive bileşeni, bu iki durum için yaşam döngüsü kancaları kaydedebilir, activated ve deactivated kancaları:

export default {
  activated() {
    // ilk montajda çağrılır
    // ve önbellekten her yeniden yerleştirildiğinde
  },
  deactivated() {
    // DOM'dan önbelleğe kaldırıldığında
    // ve ayrıca monte edilmediğinde çağrılır
  }
}

Not edin ki:

• onActivated``activated ayrıca montajda çağrılır ve onDeactivated``deactivated monte edilmediğinde çağrılır.

• Her iki kanca da yalnızca `` tarafından önbelleklenen kök bileşen için değil, aynı zamanda önbellekli ağaçtaki alt bileşenler için de çalışır.