vue3項目keepAlive使用方法詳解

本篇文章給大家帶來vue項目keepalive使用方法詳解，keepalive是Vue的內置組件，作用是將組件緩存在內存當中，防止重復渲染DOM，屬于消耗內存獲取速度。希望對大家有幫助。

常用的用法是將組件或者路由緩存，現有的用法vue2.x與vue3.x有部分差別。以下主要將keepaliev在vue3.0中的用法。

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

1、router配置緩存

1）第一步：配置App.vue
vue2.x與vue3.0的App.vue配置有差異，在App.vue配置信息如下：
vue2.x中，router-view可整個放入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是用來綁定指定組件，這里是與路由對應的頁面綁定。

2）第二步：添加meta屬性
在對應的路由上添加meta屬性來設置頁面是否要使用緩存，如下：

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

到此即可實現頁面的簡單緩存，但是有些場景需要做復雜處理，比如說頁面部分信息不需要讀緩存，每次進入都需要進行處理，這個時候我們就可以使用activated生命周期來解決頁面部分刷新問題。

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

activated() { 	// 頁面每次進入將手機動態驗證碼置為空    this.$refs.mobPwdCode.inputValue = '';},

實現的功能是用戶每次進入將動態驗證碼設為空，實現此功能也可以用其他方式，比如說將該組件放緩存外（參見2、component配置緩存）。

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

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

2、組件配置緩存

1）使用場景

通常我們會對vue的一個頁面進行緩存，然而有些時候我們僅需要緩存頁面的某一個組件，或是在使用動態組件compnent進行組件切換時需要對組件進行緩存。

2）緩存頁面指定組件

當用于App.vue時，所有的路由對應的頁面為項目所對應的組件，使用方法如下：
在keep-alive組件上使用include或exclude屬性，如下：使用include
代表將緩存name為testKA的組件，

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

在router對應的頁面中，需要設置name屬性，如下：

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

此外，include用法還有如下：

<!-- 逗號分隔字符串 --><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="['a', 'b']">   <component :is="view"></component></keep-alive>

exclude用法與include用法相同，代表不被緩存的組件。此外，keep-alive還有一個max屬性，代表緩存組件最大數量，一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

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

當用于某個頁面進行組件切換時，用法與緩存路由相同，不過只是將頁面降級為一個組件，父組件由App.vue降級為對應路由頁面。

3）總結

在實戰過程中，發現keepalive緩存組件時，不能跨級使用;，比如在App.vue中使用include屬性進行name="a"匹配時，只能匹配緩存name為a的子組件（路由頁面），而不能緩存name為"a"的孫子組件（子頁面引的組件）。

若想緩存孫子組件，可以將整個子組件緩存，或者在子組件里再使用keepalive。關于keepalive使用說明文檔，可去官網學習：https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

【