Apakah maksud komponen cache vue?

Dalam Vue, komponen cache adalah "kekal-hidup" dan merupakan komponen abstrak; ia tidak akan memaparkan elemen DOM dengan sendirinya, dan ia tidak akan muncul dalam rantaian komponen induk komponen. Komponen cache digunakan terutamanya untuk mengekalkan keadaan komponen atau mengelakkan pemaparan semula Apabila ia membungkus komponen dinamik, ia menyimpan contoh komponen yang tidak aktif dan bukannya memusnahkannya.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Dalam vue, komponen cache adalah "kekal-hidup" dan merupakan komponen abstrak.

Komponen cache "keep-alive"

keep-alive ialah komponen terbina dalam Vue apabila membungkus komponen dinamik , kejadian komponen tidak aktif akan kekal dalam ingatan, mengoptimumkan permintaan dan menghalang pemaparan semula DOM

Dokumentasi rasmi: Menggunakan keep-alive pada komponen dinamik

digunakan terutamanya untuk mengekalkan keadaan komponen atau mengelakkan pemaparan semula Apabila ia membalut komponen dinamik, ia menyimpan contoh komponen yang tidak aktif dan bukannya memusnahkannya.

(1) Cache komponen tidak berterusan Ia hanya tidak dipaparkan semula semasa aplikasi berjalan Jika halaman dimuat semula, ia masih akan kembali ke keadaan asal.

(2) ialah komponen abstrak: ia tidak memaparkan elemen DOM dengan sendirinya, dan ia juga tidak muncul dalam rantai komponen induk komponen.

(3) Komponen yang ditukar kepada dikehendaki mempunyai namanya sendiri, sama ada melalui pilihan nama komponen atau pendaftaran tempatan/global.

(4) Cangkuk dan caching kitaran hayat komponen

(5) Atribut sertakan dan tidak termasuk membenarkan komponen dicache secara bersyarat. Kedua-duanya boleh diwakili sebagai rentetan yang dipisahkan koma, ungkapan biasa atau tatasusunan.

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

Padanan mula-mula menyemak pilihan nama komponen sendiri, dan jika pilihan nama tidak tersedia, sepadan dengan nama pendaftaran setempatnya (nilai utama pilihan komponen komponen induk). Komponen tanpa nama tidak boleh dipadankan. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

Sesetengah isu dengan menggunakan komponen cache

Masalah 1: Jika terdapat terlalu banyak komponen cache, atau komponen yang tidak diperlukan turut dicache, ia akan menyebabkan penggunaan memori yang berlebihan.

Masalah 2: Ia akan menyebabkan perkara yang perlu dikemas kini dicache Contohnya, jika komponen butiran dicache, ia tidak akan dikemas kini.

Strategi: Cache yang penting, frekuensi tinggi (seperti halaman utama) atau komponen yang jarang berubah.

Penyelesaian: Tandai laluan untuk dicache, dan kemudian secara dinamik tentukan sama ada untuk cache laluan semasa memuatkannya. Kawalan yang lebih tepat ke atas komponen yang akan dicache

Kaedah penulisan yang dioptimumkan untuk cache komponen:

Apabila menentukan laluan, tambahkan penghalaan tambahan [maklumat meta ], untuk menambah beberapa elemen maklumat.

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

Tentukan sama ada untuk cache komponen berdasarkan maklumat meta meta dalam app.vue

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

(Belajar perkongsian video: Pembangunan bahagian hadapan web, Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Apakah maksud komponen cache vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!