是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中贡歧，防止重復(fù)渲染DOM。
包裹動(dòng)態(tài)組件時(shí)拱镐，會(huì)緩存不活動(dòng)的組件實(shí)例艘款，而不是銷(xiāo)毀它們。和相似沃琅，是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素哗咆，也不會(huì)出現(xiàn)在父組件鏈中。
prop:
include: 字符串或正則表達(dá)式益眉。只有匹配的組件會(huì)被緩存晌柬。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存郭脂。
在2.1.0版本Vue中
常見(jiàn)用法：
// 組件exportdefault{name:'test-keep-alive',data(){return{includedComponents:"test-keep-alive"}}}
結(jié)合router年碘，緩存部分頁(yè)面
使用$route.meta的keepAlive屬性：
需要在router中設(shè)置router的元信息meta：
//...router.jsexportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:Hello,meta:{keepAlive:false// 不需要緩存}},{path:'/page1',name:'Page1',component:Page1,meta:{keepAlive:true// 需要被緩存}}]})
使用效果
以上面router的代碼為例：
Vue
{{msg}}
{{msg}}
(1) 在Page1頁(yè)面輸入框輸入“asd”，然后手動(dòng)跳轉(zhuǎn)到Hello頁(yè)面展鸡；
(2) 回到Page1頁(yè)面發(fā)現(xiàn)之前輸入的"asd"依然保留屿衅，說(shuō)明頁(yè)面信息成功保存在內(nèi)存中；
? 圖1 進(jìn)入Page1頁(yè)面莹弊，并輸入"asd"
? 圖2 跳轉(zhuǎn)到Hello
? 圖3 返回Page1頁(yè)面涤久，輸入框數(shù)據(jù)會(huì)被保留
當(dāng)然，也可以通過(guò)動(dòng)態(tài)設(shè)置route.meta的keepAlive屬性來(lái)實(shí)現(xiàn)其他需求忍弛，
借鑒一下vue-router 之 keep-alive响迂，作者：caroly這篇博客中的例子：
首頁(yè)是A頁(yè)面
B頁(yè)面跳轉(zhuǎn)到A，A頁(yè)面需要緩存
C頁(yè)面跳轉(zhuǎn)到A细疚，A頁(yè)面不需要被緩存
思路是在每個(gè)路由的beforeRouteLeave(to, from, next)鉤子中設(shè)置to.meta.keepAlive：
A的路由：
{path:'/',name:'A',component:A,meta:{keepAlive:true// 需要被緩存}}
exportdefault{? ? data() {return{};? ? },? ? methods: {},? ? beforeRouteLeave(to,from, next) {// 設(shè)置下一個(gè)路由的 metato.meta.keepAlive =true;// B 跳轉(zhuǎn)到 A 時(shí)蔗彤，讓 A 緩存，即不刷新next();? ? }};
exportdefault{? ? data() {return{};? ? },? ? methods: {},? ? beforeRouteLeave(to,from, next) {// 設(shè)置下一個(gè)路由的 metato.meta.keepAlive =false;// C 跳轉(zhuǎn)到 A 時(shí)讓 A 不緩存，即刷新next();? ? }};
