Cara melaksanakan caching peringkat halaman melalui komponen keep-alive Vue

Cara melaksanakan caching peringkat halaman melalui komponen keep-alive vue

Pengenalan:
Apabila membangun dengan Vue, anda sering menghadapi situasi di mana anda perlu cache halaman untuk meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna. Komponen kekal hidup dalam Vue boleh membantu kami melaksanakan caching peringkat halaman, supaya halaman tertentu dapat mengekalkan keadaan dan datanya apabila bertukar. Artikel ini akan memperkenalkan cara menggunakan komponen keep-alive Vue untuk melaksanakan caching peringkat halaman.

1. Pengenalan kepada komponen keep-alive
   keep-alive ialah komponen abstrak yang disediakan oleh Vue dan digunakan untuk cache komponen lain. Dengan membungkus komponen yang perlu dicache dalam teg keep-alive, komponen ini boleh dicache dan digunakan semula semasa penukaran.
2. Cara menggunakan keep-alive
   Menggunakan komponen keep-alive dalam Vue adalah sangat mudah Anda hanya perlu menambah teg 7c9485ff8c3cba5ae9343ed63c2dc3f7 di luar komponen yang perlu dicache dan nyatakan komponen yang perlu dicache. Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<keep-alive>
  <router-view></router-view>
</keep-alive>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Dalam kod di atas, komponen <.router-view>

3. kaedah kitaran hayat kekal hidup
   Apabila menggunakan komponen kekal hidup, anda mungkin perlu mengawal kitaran hayat komponen yang dicache. Vue menyediakan dua fungsi kitaran hayat: diaktifkan dan dinyahaktifkan, yang digunakan untuk mengawal kelakuan komponen antara cache dan keadaan pengaktifan.

diaktifkan: Dipanggil apabila komponen diaktifkan, iaitu apabila ia pergi dari cache ke keadaan diaktifkan.
dinyahaktifkan: Dipanggil apabila komponen dicache, iaitu dipanggil daripada pengaktifan kepada keadaan cache.

Dalam kod di atas, kami menambah acara yang diaktifkan dan dinyahaktifkan pada komponen 975b587bf85a482ea10b0a28848e78a4 untuk mendengar peristiwa apabila komponen diaktifkan dan dicache, dan melakukan pemprosesan logik dalam kaedah yang sepadan.


Caching halaman
Apabila menggunakan komponen keep-alive, kita boleh mengawal halaman mana yang dicache dengan menambahkan medan meta pada konfigurasi penghalaan. Contohnya:

const route = [
{

<keep-alive>
  <router-view v-on:activated="onActivated"
               v-on:deactivated="onDeactivated">
  </router-view>
</keep-alive>

},

{

onActivated() {
  // 组件被激活时的逻辑处理
},
onDeactivated() {
  // 组件被缓存时的逻辑处理
}

4. }
   ]

Dalam kod di atas, kami menambahkan medan meta ke halaman Utama dan menetapkannya kepada keepAlive: true, menunjukkan yang kami perlukan Halaman ini dicache; untuk halaman Perihal, kami tetapkan keepAlive: false, menunjukkan bahawa ia tidak perlu dicache.

Kemudian, hantar medan meta ke komponen keep-alive melalui arahan v-bind pada komponen 975b587bf85a482ea10b0a28848e78a4 dan gunakan v-if dalam komponen keep-alive untuk menentukan dan cache komponen yang perlu dicache:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

path: '/',
name: 'Home',
component: Home,
meta: { keepAlive: true } // 需要进行缓存

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Dalam kod di atas, kami menghantar medan meta.keepAlive melalui bahagian keep-alive -bind, dan Gunakan v-if dalam komponen keep-alive untuk menentukan sama ada komponen cache diperlukan. . / template>

3f1c4e4b6b16bbbd69b2ee476dc4f83a

eksport lalai {

dikira: {

path: '/about',
name: 'About',
component: About,
meta: { keepAlive: false } // 不需要进行缓存

}

}

2cacc6d41bbb37262a98f745aa00fbf0

Dalam contoh di atas, kami memperoleh medan meta yang sepadan dengan laluan semasa melalui atribut yang dikira dan v- bind menghantarnya ke komponen keep-alive. Dengan cara ini, cache halaman boleh dikawal berdasarkan medan meta konfigurasi penghalaan.

Ringkasan:

Melalui komponen keep-alive Vue, kami boleh melaksanakan caching peringkat halaman dan meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna. Anda boleh mengawal kelakuan komponen cache dengan lebih fleksibel dengan menetapkan komponen yang perlu dicache dan kaedah kitaran hayat yang mendengar status cache dan pengaktifan. Saya harap artikel ini dapat membantu anda memahami dan menggunakan komponen keep-alive Vue.

Atas ialah kandungan terperinci Cara melaksanakan caching peringkat halaman melalui komponen keep-alive Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!