keep-alive的深刻理解與使用(配合router-view緩存整個路由頁面)

原來來自: http://blog.myweb.kim/vue/kee... 轉發請註明出處。

在搭建 vue 項目時，有某些組件不必屢次渲染，因此須要將組件在內存中進行‘持久化’，此時 <keep-alive> 即可以派上用場了。 <keep-alive> 可使被包含的組件狀態維持不變，即使是組件切換了，其內的狀態依舊維持在內存之中。在下一次顯示時，也不會重現渲染。

PS： <keep-alive> 與 <transition>類似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，好比：你永遠在 this.$parent 中找不到 keep-alive 。

1. keep-alive的基礎使用

最基礎的通常是結合動態組件去使用：

<keep-alive>
    <component :is="currentView"></component>
</keep-alive>

new Vue({
    el: '#app',
    data(){
        return {
            currentView: Test //Test爲引入的子組件
        }
    }
})

不過此種方式並沒有太大的實用意義。

2. 生命週期鉤子

被包含在 <keep-alive> 中建立的組件，會多出兩個生命週期的鉤子: activated 與 deactivated

• activated

在組件被激活時調用，在組件第一次渲染時也會被調用，以後每次keep-alive激活時被調用。

• deactivated

在組件被停用時調用。

注意：只有組件被 keep-alive 包裹時，這兩個生命週期纔會被調用，若是做爲正常組件使用，是不會被調用，以及在 2.1.0 版本以後，使用 exclude 排除以後，就算被包裹在 keep-alive 中，這兩個鉤子依然不會被調用！另外在服務端渲染時此鉤子也不會被調用的。

3. 配合router-view使用

有些時候可能須要將整個路由頁面一切緩存下來，也就是將 <router-view> 進行緩存。這種使用場景仍是蠻多的。

在vue 2.1.0 以前，大部分是這樣實現的：

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

//router配置
new Router({
    routes: [
        {
            name: 'a',
            path: '/a',
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: 'b',
            path: '/b',
            component: B
        }
    ]
})

這樣配置路由的路由元信息以後，a路由的 $router.meta.keepAlive 便爲 true ，而b路由則爲 false 。
因此爲 true 的將被包裹在 keep-alive 中，爲 false 的則在外層。這樣a路由便達到了被緩存的效果，若是還有想要緩存的路由，只須要在路由元中加入 keepAlive: true 便可。

4. 在2.1.0版本以後

在vue 2.1.0 版本以後，keep-alive 新加入了兩個屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存，優先級大於include) 。

include 和 exclude 屬性容許組件有條件地緩存。兩者均可以用逗號分隔字符串、正則表達式或一個數組來表示。
當使用正則或者是數組時，必定要使用 v-bind !

<!-- 逗號分隔字符串，只有組件a與b被緩存。這樣使用場景變得更有意義了 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表達式 (須要使用 v-bind，符合匹配規則的都會被緩存) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (須要使用 v-bind，被包含的都會被緩存) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

有了include以後，再與 router-view 一塊兒使用時便方便許多了:

<!-- 一個include解決了，不須要多寫一個標籤，也不須要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keeo-alive>

4. 須要注意的地方

1. <keep-alive> 先匹配被包含組件的 name 字段，若是 name 不可用，則匹配當前組件 components 配置中的註冊名稱。
2. <keep-alive> 不會在函數式組件中正常工做，由於它們沒有緩存實例。
3. 當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先級最高(當前vue 2.4.2 version)。好比：包含於排除同時匹配到了組件A，那組件A不會被緩存。
4. 包含在 <keep-alive> 中，但符合 exclude ，不會調用activated 和 deactivated。

以上, 致那顆騷動的心……