一、介紹

keepalive是Vue的內(nèi)置組件，作用是將組件緩存在內(nèi)存當(dāng)中，防止重復(fù)渲染DOM，屬于消耗內(nèi)存獲取速度。常用的用法是將組件或者路由緩存，現(xiàn)有的用法vue2.x與vue3.x有部分差別。以下主要將keepaliev在vue3.0中的用法。

二、使用

通常我們可以配置整個(gè)頁(yè)面緩存或只讓特定的某個(gè)組件保持緩存信息，配置了keepalive的路由或者組件，只會(huì)在頁(yè)面初始化的時(shí)候執(zhí)行created->mounted生命周期，第二次及以后再進(jìn)入該頁(yè)面將不會(huì)執(zhí)行改生命周期，而是會(huì)去讀取緩存信息。

1、router配置緩存

1）第一步：配置App.vue
vue2.x與vue3.0的App.vue配置有差異，在App.vue配置信息如下：
vue2.x中，router-view可整個(gè)放入keepalive中，如下：

<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.vue配置方法如下：

<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>

這里component是vue中的特殊組件，:is是用來(lái)綁定指定組件，這里是與路由對(duì)應(yīng)的頁(yè)面綁定。

2）第二步：添加meta屬性
在對(duì)應(yīng)的路由上添加meta屬性來(lái)設(shè)置頁(yè)面是否要使用緩存，如下：

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //設(shè)置頁(yè)面是否需要使用緩存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

到此即可實(shí)現(xiàn)頁(yè)面的簡(jiǎn)單緩存，但是有些場(chǎng)景需要做復(fù)雜處理，比如說(shuō)頁(yè)面部分信息不需要讀緩存，每次進(jìn)入都需要進(jìn)行處理，這個(gè)時(shí)候我們就可以使用activated生命周期來(lái)解決頁(yè)面部分刷新問(wèn)題。

3）實(shí)現(xiàn)頁(yè)面部分刷新
先了解vue的生命周期，被keepAlive包裹的組件和頁(yè)面，頁(yè)面進(jìn)入時(shí)執(zhí)行的生命周期為：created->mounted->activated;
其中created->mounted是頁(yè)面第一次進(jìn)入才會(huì)執(zhí)行，activated生命周期在頁(yè)面每次進(jìn)入都會(huì)執(zhí)行，特屬于keepAlive的一個(gè)生命周期，所以我們把頁(yè)面每次進(jìn)來(lái)要進(jìn)行的操作放入該生命周期即可。
如下代碼：

activated() {
	// 頁(yè)面每次進(jìn)入將手機(jī)動(dòng)態(tài)驗(yàn)證碼置為空
   this.$refs.mobPwdCode.inputValue = '';
},

實(shí)現(xiàn)的功能是用戶每次進(jìn)入將動(dòng)態(tài)驗(yàn)證碼設(shè)為空，實(shí)現(xiàn)此功能也可以用其他方式，比如說(shuō)將該組件放緩存外（參見(jiàn)2、component配置緩存）。

4）動(dòng)態(tài)設(shè)置路由keepAlive屬性
有些時(shí)候我們用完了keepalive緩存之后，想讓頁(yè)面不再保持緩存，或者設(shè)置下一個(gè)頁(yè)面keepalive，也這個(gè)時(shí)候我們可以改變meta的keepAlive值來(lái)去除頁(yè)面緩存，使用beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，使用方式如下：

// to為即將跳轉(zhuǎn)的路由，from為上一個(gè)頁(yè)面路由
beforeRouteLeave(to, from,+ next) {
    // 設(shè)置下一個(gè)路由的 meta
    to.meta.keepAlive = false;
    next();
}

2、組件配置緩存

1）使用場(chǎng)景

通常我們會(huì)對(duì)vue的一個(gè)頁(yè)面進(jìn)行緩存，然而有些時(shí)候我們僅需要緩存頁(yè)面的某一個(gè)組件，或是在使用動(dòng)態(tài)組件compnent進(jìn)行組件切換時(shí)需要對(duì)組件進(jìn)行緩存。

2）緩存頁(yè)面指定組件

當(dāng)用于App.vue時(shí)，所有的路由對(duì)應(yīng)的頁(yè)面為項(xiàng)目所對(duì)應(yīng)的組件，使用方法如下：
在keep-alive組件上使用include或exclude屬性，如下：使用include
代表將緩存name為testKA的組件，

// APP.vue文件，將頁(yè)面作為組件緩存
<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive>
</router-view>

在router對(duì)應(yīng)的頁(yè)面中，需要設(shè)置name屬性，如下：

export default {
    name:'testKA',// keep-alive中include屬性匹配組件name
    data() {return {}},
    activated() {
        // keepalive緩存的頁(yè)面每次進(jìn)入都會(huì)進(jìn)行的生命周期
    },
}

此外，include用法還有如下：

<!-- 逗號(hào)分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正則表達(dá)式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- 數(shù)組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

exclude用法與include用法相同，代表不被緩存的組件。此外，keep-alive還有一個(gè)max屬性，代表緩存組件最大數(shù)量，一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒(méi)有被訪問(wèn)的實(shí)例會(huì)被銷(xiāo)毀掉。

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

當(dāng)用于某個(gè)頁(yè)面進(jìn)行組件切換時(shí)，用法與緩存路由相同，不過(guò)只是將頁(yè)面降級(jí)為一個(gè)組件，父組件由App.vue降級(jí)為對(duì)應(yīng)路由頁(yè)面。

3）總結(jié)

在實(shí)戰(zhàn)過(guò)程中，發(fā)現(xiàn)keepalive緩存組件時(shí)，不能跨級(jí)使用;，比如在App.vue中使用include屬性進(jìn)行name="a"匹配時(shí)，只能匹配緩存name為a的子組件（路由頁(yè)面），而不能緩存name為"a"的孫子組件（子頁(yè)面引的組件）。若想緩存孫子組件，可以將整個(gè)子組件緩存，或者在子組件里再使用keepalive。關(guān)于keepalive使用說(shuō)明文檔，可去官網(wǎng)學(xué)習(xí)：https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

到此這篇關(guān)于vue3項(xiàng)目keepAlive使用方法詳解的文章就介紹到這了,更多相關(guān)vue3 keepAlive使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論