Penjelasan terperinci tentang cara menggunakan keepAlive dalam projek vue3

Artikel ini membawakan anda penerangan terperinci tentang cara menggunakan keepalive dalam projek Vue Keepalive ialah komponen terbina dalam Vue Fungsinya adalah untuk men-cache komponen dalam memori untuk mengelakkan rendering berulang DOM, yang menggunakan pemerolehan memori. kelajuan. Semoga ia membantu semua orang.

Penggunaan biasa adalah untuk cache komponen atau laluan Terdapat beberapa perbezaan antara penggunaan sedia ada vue2.x dan vue3.x. Yang berikut terutamanya menerangkan penggunaan keepaliev dalam vue3.0.

Biasanya kami boleh mengkonfigurasi keseluruhan cache halaman atau hanya membenarkan komponen tertentu untuk mengekalkan maklumat cache Jika laluan atau komponen keepalive dikonfigurasikan, kitaran hayat yang dicipta->dilekapkan hanya akan dilaksanakan apabila halaman dimulakan. . Bab 1 Apabila anda memasuki halaman untuk kali kedua atau kemudian, kitaran hayat tidak akan diubah, tetapi maklumat cache akan dibaca.

1. Cache konfigurasi penghala

1) Langkah pertama: Konfigurasikan App.vue
vue2.x dan vue3.0 Terdapat perbezaan dalam konfigurasi App.vue Maklumat konfigurasi App.vue adalah seperti berikut:
Dalam vue2.x, paparan penghala boleh diletakkan sepenuhnya dalam keepalive, seperti berikut:

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/></template>

vue3.0 App. Kaedah konfigurasi vue adalah seperti berikut:

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> </template>

Komponen di sini ialah komponen khas dalam vue, :is digunakan untuk mengikat komponen yang ditentukan, berikut ialah pengikatan halaman yang sepadan dengan laluan .

2) Langkah kedua: Tambah atribut meta
Tambah atribut meta pada laluan yang sepadan untuk menetapkan sama ada halaman perlu menggunakan caching, seperti berikut:

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

Pada ketika ini, caching mudah halaman boleh dicapai, tetapi sesetengah senario memerlukan pemprosesan yang rumit Contohnya, sebahagian daripada maklumat halaman tidak perlu dibaca daripada cache Ia perlu diproses setiap kali ia dimasukkan. Pada masa ini, kita boleh menggunakan kitaran hayat yang diaktifkan untuk menyelesaikan soalan Muat semula halaman.

3) Realisasikan penyegaran halaman separa
Mula-mula fahami kitaran hayat vue, komponen dan halaman yang dibalut oleh keepAlive, kitaran hayat yang dilaksanakan apabila halaman itu dimasukkan ialah ：dicipta->dilekap->diaktifkan;
Antaranya, dicipta->dilekapkan akan dilaksanakan hanya apabila halaman dimasukkan buat kali pertama Kitaran hayat yang diaktifkan akan dilaksanakan setiap kali halaman dimasukkan, terutamanya untuk keepAlive A kitaran hayat, jadi kami boleh meletakkan operasi yang akan dilakukan setiap kali halaman masuk ke dalam kitaran hayat ini.
Kod berikut:

activated() {
	// 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';},

Fungsi yang dilaksanakan adalah untuk menetapkan kod pengesahan dinamik untuk kosong setiap kali pengguna masuk Fungsi ini juga boleh dilaksanakan dengan cara lain, seperti meletakkan komponen di luar cache (lihat 2. Cache konfigurasi komponen).

4) Tetapkan atribut keepAlive penghalaan secara dinamik
Kadang-kadang selepas kami menggunakan cache keepalive, kami mahu halaman tidak lagi kekal dicache atau menetapkan keepalive halaman seterusnya . Pada masa ini kami Anda boleh menukar nilai keepAlive meta untuk mengalih keluar cache halaman Gunakan beforeRouteEnter, dan beforeRouteLeave Penggunaannya adalah seperti berikut:

// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();}

2

1) Senario penggunaan

Biasanya kami cache halaman dalam Vue, tetapi kadangkala kami hanya perlu cache komponen tertentu halaman, atau kami perlu cache komponen apabila menggunakan komponen komponen dinamik untuk menukar komponen.

2) Komponen yang ditentukan halaman cache

Apabila digunakan dalam App.vue, halaman yang sepadan dengan semua laluan adalah komponen yang sepadan dengan projek Kaedah penggunaan adalah seperti berikut:
dalam keep-alive Gunakan atribut include atau exclude pada komponen, seperti berikut: Gunakan include
untuk menyatakan bahawa komponen bernama testKA akan dicache,

// APP.vue文件，将页面作为组件缓存<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive></router-view>

Dalam halaman yang sepadan dengan penghala, anda perlu menetapkan atribut nama, seperti berikut:

export default {
    name:'testKA',// keep-alive中include属性匹配组件name
    data() {return {}},
    activated() {
        // keepalive缓存的页面每次进入都会进行的生命周期
    },}

Selain itu, sertakan penggunaan adalah seperti berikut:

<!-- 逗号分隔字符串 --><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>

kecualikan penggunaan adalah sama seperti termasuk penggunaan, mewakili komponen yang tidak dicache. Selain itu, keep-alive juga mempunyai atribut maks, yang mewakili bilangan maksimum komponen cache Setelah nombor ini dicapai, contoh komponen cache yang paling lama tidak diakses akan dimusnahkan sebelum kejadian baharu. dicipta.

<keep-alive :max="10">
  <component :is="view"></component></keep-alive>

Apabila digunakan untuk menukar komponen pada halaman, penggunaannya adalah sama seperti penghalaan cache, tetapi ia hanya menurunkan taraf halaman kepada komponen dan komponen induk diturunkan daripada App.vue kepada yang sepadan halaman penghalaan.

3) Ringkasan

Semasa pertempuran sebenar, didapati bahawa apabila komponen cache keepalive ditemui, tidak boleh digunakan merentas peringkat ;, seperti menggunakan sertakan atribut untuk name= dalam App.vue Apabila "a" sepadan, ia hanya boleh memadankan sub-komponen (halaman penghalaan) dengan nama cache "a", tetapi tidak boleh cache komponen cucu (komponen yang dirujuk oleh sub-halaman) dengan nama "a".

Jika anda ingin cache komponen cucu, anda boleh cache keseluruhan subkomponen atau gunakan keepalive dalam subkomponen. Untuk arahan penggunaan keepalive, anda boleh pergi ke tapak web rasmi untuk mengetahui: https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan keepAlive dalam projek vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!