1. keep-alive的基礎(chǔ)使用
最基礎(chǔ)的一般是結(jié)合動(dòng)態(tài)組件去使用：
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
new Vue({
el: '#app',
data(){
return {
currentView: Test //Test為引入的子組件
}
}
})
2. 生命周期鉤子
被包含在 中創(chuàng)建的組件瘟芝，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated
activated
在組件被激活時(shí)調(diào)用砌滞，在組件第一次渲染時(shí)也會(huì)被調(diào)用肛度，之后每次keep-alive激活時(shí)被調(diào)用。
deactivated
在組件被停用時(shí)調(diào)用啼止。
注意：只有組件被 keep-alive 包裹時(shí)恋技，這兩個(gè)生命周期才會(huì)被調(diào)用致份，如果作為正常組件使用智袭，是不會(huì)被調(diào)用，以及在 2.1.0 版本之后掠抬，使用 exclude 排除之后吼野，就算被包裹在 keep-alive 中，這兩個(gè)鉤子依然不會(huì)被調(diào)用两波！另外在服務(wù)端渲染時(shí)此鉤子也不會(huì)被調(diào)用的瞳步。
3. 配合router-view使用
有些時(shí)候可能需要將整個(gè)路由頁面一切緩存下來，也就是將 進(jìn)行緩存腰奋。這種使用場(chǎng)景還是蠻多的单起。
在vue 2.1.0 之前，大部分是這樣實(shí)現(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路由便達(dá)到了被緩存的效果，如果還有想要緩存的路由康二，只需要在路由元中加入 keepAlive: true 即可碳胳。
4. 在2.1.0版本之后
在vue 2.1.0 版本之后，keep-alive 新加入了兩個(gè)屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存沫勿，優(yōu)先級(jí)大于include) 挨约。
include 和 exclude 屬性允許組件有條件地緩存味混。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示诫惭。
當(dāng)使用正則或者是數(shù)組時(shí)翁锡，一定要使用 v-bind !
<!-- 逗號(hào)分隔字符串，只有組件a與b被緩存贝攒。這樣使用場(chǎng)景變得更有意義了 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正則表達(dá)式 (需要使用 v-bind盗誊，符合匹配規(guī)則的都會(huì)被緩存) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都會(huì)被緩存) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
