目的：介於產品非要我實現進入詳情頁出來頁面篩選項不變這個需求~於是我學習了下

一、介紹

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使用說明文件，可去官網學習：v3.vuejs.org/guide/compo…

• 原文連結：blog.csdn.net/m0_46309087…