深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
在搭建 vue 項目時，有某些組件沒必要多次渲染，所以需要將組件在內存中進行‘持久化‘，此時 <keep-alive> 便可以派上用場了。 <keep-alive> 可以使被包含的組件狀態維持不變，即便是組件切換了，其內的狀態依舊維持在內存之中。在下一次顯示時，也不會重現渲染。
PS：
<keep-alive>與<transition>相似，只是一個抽象組件，它不會在DOM樹中渲染(真實或者虛擬都不會)，也不在父組件鏈中存在，比如：你永遠在this.$parent中找不到keep-alive。
1. keep-alive的基礎使用
最基礎的一般是結合動態組件去使用：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<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 之前，大部分是這樣實現的：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!-- 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 !
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 逗號分隔字符串，只有組件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 一起使用時便方便許多了:
| 1 2 3 4 |
<!-- 一個include解決了，不需要多寫一個標簽，也不需要在路由元中添加keepAlive了 -->
<keep-alive include=‘a‘>
<router-view></router-view>
</keeo-alive>
|
5. 需要註意的地方
<keep-alive>先匹配被包含組件的name字段，如果name不可用，則匹配當前組件componetns配置中的註冊名稱。<keep-alive>不會在函數式組件中正常工作，因為它們沒有緩存實例。- 當匹配條件同時在
include與exclude存在時，以exclude優先級最高(當前vue 2.4.2 version)。比如：包含於排除同時匹配到了組件A，那組件A不會被緩存。 - 包含在
<keep-alive>中，但符合exclude，不會調用activated和deactivated。
深入理解與使用keep-alive(配合router-view緩存整個路由頁面)