官方說明

<keep-alive>包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和<transition>相似，<keep-alive>是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在元件的父元件鏈中。

當元件在<keep-alive>內被切換，它的activated和deactivated這兩個生命週期鉤子函式將會被對應執行。

用途

主要用於保留元件狀態或避免重新渲染。

生命週期函式

activated

在 keep-alive 元件啟用時呼叫
該鉤子函式在伺服器端渲染期間不被呼叫

disactivated

在 keep-alive 元件停用時呼叫
該鉤子在伺服器端渲染期間不被呼叫

生命週期執行順序：

　　1、不使用keep-alive的：beforeRouteEnter --> created --> mounted --> destroyed
　　2、使用keep-alive的：beforeRouteEnter --> created --> mounted --> activated --> deactivated
　　3、使用keep-alive，再次進入了快取頁面：beforeRouteEnter -->activated --> deactivated

使用總結

基本用法

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多個條件判斷的子元件 -->
<keep-alive>
  <comp-a v-if
 
="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

根據條件快取

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

個人最常使用：結合router快取部分頁面

1.app.vue

<template>
  <div id="app">
    <keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2.router目錄index.js

export default new Router({
  routes: [
    { path:'*', component: (resolve) => require(['../components/main/login.vue'], resolve) },

    { 
      path: '/monitorMenu',
      name: 'monitorMenu', 
      component: monitorMenu ,
      meta: {
       keepAlive: true, // 判斷是否需要快取
      }
    },
  ]
})

使用keep-alive快取頁面，返回時重新整理部分資料示例

通過上面已經知道了被keep-alive包裹的頁面會被快取。同時知道生命週期執行順序：

使用keep-alive的：beforeRouteEnter --> created --> mounted --> activated --> deactivated
使用keep-alive，再次進入了快取頁面：beforeRouteEnter -->activated --> deactivated。

所以只需要使用keep-alive結合router快取需要快取的頁面，然後把需要重新整理的資料放在頁面的activated 鉤子函式中。

 activated(){
    //需要重新整理的頁面方法
     this.getSubsideList();
  },