概念

??keep-alive 是 Vue 的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)哼御，會(huì)緩存不活動(dòng)的組件實(shí)例坯临，而不是銷毀它們焊唬。和 transition 相似，keep-alive 是一個(gè)抽象組件：它自身不會(huì)渲染成一個(gè) DOM 元素看靠，也不會(huì)出現(xiàn)在父組件鏈中赶促。

作用

??在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM挟炬，減少加載時(shí)間及性能消耗鸥滨，提高用戶體驗(yàn)性

原理

??在 created 函數(shù)調(diào)用時(shí)將需要緩存的 VNode 節(jié)點(diǎn)保存在 this.cache 中／在 render（頁面渲染） 時(shí)，如果 VNode 的 name 符合緩存條件（可以用 include 以及 exclude 控制）辟宗，則會(huì)從 this.cache 中取出之前緩存的 VNode 實(shí)例進(jìn)行渲染爵赵。

??VNode：虛擬DOM吝秕，其實(shí)就是一個(gè)JS對(duì)象

Props

• include - 字符串或正則表達(dá)式泊脐。只有名稱匹配的組件會(huì)被緩存。
• exclude - 字符串或正則表達(dá)式烁峭。任何名稱匹配的組件都不會(huì)被緩存容客。
• max - 數(shù)字。最多可以緩存多少組件實(shí)例约郁。

生命周期函數(shù)

?1. activated
??在 keep-alive 組件激活時(shí)調(diào)用
??該鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用

?2. deactivated
??在 keep-alive 組件停用時(shí)調(diào)用
??該鉤子在服務(wù)器端渲染期間不被調(diào)用

??被包含在 keep-alive 中創(chuàng)建的組件缩挑，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated

??使用 keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁面的時(shí)候獲取最新的數(shù)據(jù)鬓梅，需要在 activated 階段獲取數(shù)據(jù)供置，承擔(dān)原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)。

??注意： 只有組件被 keep-alive 包裹時(shí)绽快，這兩個(gè)生命周期函數(shù)才會(huì)被調(diào)用芥丧，如果作為正常組件使用，是不會(huì)被調(diào)用的坊罢，以及在 2.1.0 版本之后续担，使用 exclude 排除之后，就算被包裹在 keep-alive 中活孩，這兩個(gè)鉤子函數(shù)依然不會(huì)被調(diào)用物遇！另外，在服務(wù)端渲染時(shí)憾儒，此鉤子函數(shù)也不會(huì)被調(diào)用询兴。

緩存所有頁面

??1. 在 App.vue 里面

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

根據(jù)條件緩存頁面

??1. 在 App.vue 里面

<template>
  <div id="app">
    // 1. 將緩存 name 為 test 的組件
    <keep-alive include='test'>
      <router-view/>
    </keep-alive>
    
    // 2. 將緩存 name 為 a 或者 b 的組件，結(jié)合動(dòng)態(tài)組件使用
    <keep-alive include='a,b'>
      <router-view/>
    </keep-alive>
    
    // 3. 使用正則表達(dá)式起趾，需使用 v-bind
    <keep-alive :include='/a|b/'>
      <router-view/>
    </keep-alive>   
    
    // 5.動(dòng)態(tài)判斷
    <keep-alive :include='includedComponents'>
      <router-view/>
    </keep-alive>
    
    // 5. 將不緩存 name 為 test 的組件
    <keep-alive exclude='test'>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

結(jié)合Router诗舰，緩存部分頁面

??1. 在 router 目錄下的 index.js 文件里

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
            keepAlive: false // 不需要緩存
          }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
            keepAlive: true  // 需要緩存
          }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
            keepAlive: true  // 需要緩存
          }
        }
      ]
    }
  ]
})

??2. 在 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>

<script>
export default {
  name: 'App'
}
</script>

使用 router.meta 拓展

??假設(shè)這里有 3 個(gè)路由： A、B阳掐、C始衅。

??需求：
????默認(rèn)顯示 A
????B 跳到 A冷蚂，A 不刷新
????C 跳到 A，A 刷新

??實(shí)現(xiàn)方式：
??1. 在 A 路由里面設(shè)置 meta 屬性

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            keepAlive: true // 需要被緩存
        }
}

??2. 在 B 組件里面設(shè)置 beforeRouteLeave

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 設(shè)置下一個(gè)路由的 meta
            to.meta.keepAlive = true;  // 讓 A 緩存汛闸，即不刷新
            next();
        }
};

??3. 在 C 組件里面設(shè)置 beforeRouteLeave

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 設(shè)置下一個(gè)路由的 meta
            to.meta.keepAlive = false; // 讓 A 不緩存蝙茶，即刷新
            next();
        }
};

??這樣便能實(shí)現(xiàn) B 回到 A，A 不刷新诸老；而 C 回到 A 則刷新隆夯。

2.5.0 版本新增max

??最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了别伏，在新實(shí)例被創(chuàng)建之前蹄衷，已緩存組件中最久沒有被訪問的實(shí)例會(huì)被銷毀掉。

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

注意

??注意這個(gè) <keep-alive> 要求被切換到的組件都有自己的名字厘肮，不論是通過組件的 name 選項(xiàng)還是局部/全局注冊(cè)愧口。