原文鏈接： 點我
在搭建 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="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router配置
new Router({
routes: [
{
name: 'a',
path: '/a',
component: A,
meta: {
keepAlive: true
}
},
{
name: 'b',
path: '/b',
component: B
}
]
})
這樣配置路由的路由元信息之后，a路由的 $route.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.需要注意的地方
<keep-alive>先匹配被包含組件的name字段，如果name不可用，則匹配當前組件componetns配置中的注冊名稱。<keep-alive>不會在函數式組件中正常工作，因為它們沒有緩存實例。- 當匹配條件同時在
include與exclude存在時，以exclude優先級最高(當前vue 2.4.2 version)。比如：包含於排除同時匹配到了組件A，那組件A不會被緩存。 - 包含在
<keep-alive>中，但符合exclude，不會調用activated和deactivated。