keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節省性能，由于是一個抽象組件，所以在v頁面渲染完畢后不會被渲染成一個DOM元素.
區別
不使用 keep-alive 時 每次切換組件 會重復銷毀組件---創建組件 重復發起請求調取數據
使用 keep-alive 后 每次切換組件 只會在第一次觸發組件 created 生命周期函數 并且 離開該組件時不會銷毀該組件

keep-alive 的生命周期
1.初次進入時：created > mounted > activated；退出后觸發 deactivated
2.再次進入：會觸發 activated；

keep-alive 的參數
1.include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
2.exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
3.max - 數字。最多可以緩存多少組件實例。

include 、exclude 允許組件有條件地緩存。3種寫法
<keep-alive include="a,b">
<keep-alive :include="/a|b/">
<keep-alive :include="['a', 'b']">
切記！include配置的name，是組件的name，而不是router上的name！
切記！include配置的name，是組件的name，而不是router上的name！

<keep-alive include ="組件的name">

</keep-alive>

也可以通過路由表中的mate屬性 配置哪些需要緩存

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello,

      meta: {

        keepAlive: false // 不需要緩存

      }

    },
]
})

<keep-alive >
      <router-view v-if="this.$route.meta.keepAlive"> </router-view>
</keep-alive>

      <router-view v-if="!this.$route.meta.keepAlive"> </router-view>

注意如果是動態路由使用　keep-alive 需要給　router-view 設置key值

動態路由大多是使用一個組件 只是數據不同 所以key值 直接設置自己的路由信息即可

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>

同一個頁面有時候被緩存，有時候不被緩存

結合vuex將需要緩存的頁面進行管理
A列表->Bform表單（有個選擇地址）->通過點擊地址來到C，
C在這里選擇完地址，返回->B（這個應該是剛才緩存的那個表單）->A
app.vue

<keep-alive :include="cachePage">
      <router-view> </router-view>
    </keep-alive>

store.js

......
const state = {
  cachePage: "",
};
const mutations = {
  cachePageFun(state, val) {
    state.cachePage = val;
  },
 ......

a.vue

.......
      this.$store.commit("cachePageFun", "bb");
      this.$router.push("/b");
.....

b.vue

.......
  name: "bb",

.......

    goList() {
      this.$store.commit("cachePageFun", "");
      this.$router.push("/a");
    }
.....

c.vue，正常跳轉返回B就行

<router-link to="/b">bbbb</router-link>

問題：

<keep-alive include="A,B,C" :max="2">

依次進入A,B,C頁面，緩存中是那 2 個頁面
答：
keep-alive緩存類似隊列效果，先進先出，依次進入A,B，此時緩存中是A,B，由于max=2，最多可以緩存 2 個組件實例，再次進入C時，將最先進入緩存的A，給踢出去，先進先出。

問題：被緩存的頁面生命周期

答：
A,B均為首次進入：
進入頁面A開始：
beforeCreate -> created -> beforeMount-> mounted-> activated
離開A去B時（銷毀時）：
B: beforeCreate -> B: created -> B: beforeMount -> A: deactivated -> B: mounted -> B: activated
如果都不是首次進入：
從B進入頁面A開始：B: deactivated -> A: activated
從A進入頁面B開始：A: deactivated -> B: activated