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.

1038fc66b56645805578e2e786c33093
3a9efc80b00b302f797c801d5f73f956
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

227dbf312b29b2dfafd2902d664cd056
fad9f6a14592db518ac5e95030bbb33d
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

1d733825f9bcc4ef626ba6751304bb79
ebb2d94ca87df38137a52379b8767b08
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

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!