1. keep-alive的基礎使用
最基礎的一般是結(jié)合動態(tài)組件去使用：
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
new Vue({
el: '#app',
data(){
return {
currentView: Test //Test為引入的子組件
}
}
})
2. 生命周期鉤子
被包含在 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated
activated
在組件被激活時調(diào)用，在組件第一次渲染時也會被調(diào)用，之后每次keep-alive激活時被調(diào)用。
deactivated
在組件被停用時調(diào)用。
注意：只有組件被 keep-alive 包裹時，這兩個生命周期才會被調(diào)用，如果作為正常組件使用，是不會被調(diào)用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子依然不會被調(diào)用！另外在服務端渲染時此鉤子也不會被調(diào)用的。
3. 配合router-view使用
有些時候可能需要將整個路由頁面一切緩存下來，也就是將 進行緩存。這種使用場景還是蠻多的。
在vue 2.1.0 之前，大部分是這樣實現(xiàn)的：
<keep-alive>
<router-view v-if="$router.meta.keepAlive&&isFromApage"></router-view>
</keep-alive>
<router-view v-if="!($router.meta.keepAlive&&isFromApage)"></router-view>
js
beforeRouteEnter(to, from, next) {
next(vm => {
if(vm.from_path == Apage){
vm.isFromApage = true
}
});
},
//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(排除的組件不緩存，優(yōu)先級大于include) 。
include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數(shù)組來表示。
當使用正則或者是數(shù)組時，一定要使用 v-bind !
<!-- 逗號分隔字符串，只有組件a與b被緩存。這樣使用場景變得更有意義了 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正則表達式 (需要使用 v-bind，符合匹配規(guī)則的都會被緩存) -->
<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>
