<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中帘不，防止重復(fù)渲染DOM惶翻。
<keep-alive>包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例嫉戚，而不是銷毀它們刨裆。和<transition>相似澈圈，<keep-alive>是一個抽象組件：它自身不會渲染一個 DOM 元素彬檀，也不會出現(xiàn)在父組件鏈中帆啃。
prop:
- include: 字符串或正則表達(dá)式。只有匹配的組件會被緩存窍帝。
- exclude: 字符串或正則表達(dá)式努潘。任何匹配的組件都不會被緩存。
在2.1.0版本Vue中
常見用法：
// 組件
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
<keep-alive include="test-keep-alive">
<!-- 將緩存name為test-keep-alive的組件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 將緩存name為a或者b的組件坤学，結(jié)合動態(tài)組件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正則表達(dá)式疯坤，需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 動態(tài)判斷 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 將不緩存name為test-keep-alive的組件 -->
<component></component>
</keep-alive>
結(jié)合router，緩存部分頁面
使用$route.meta的keepAlive屬性：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中設(shè)置router的元信息meta：
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要緩存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被緩存
}
}
]
})
使用效果
以上面router的代碼為例：
<!-- Page1頁面 -->
<template>
<div class="hello">
<h1>Vue</h1>
<h2>{{msg}}</h2>
<input placeholder="輸入框"></input>
</div>
</template>
<!-- Hello頁面 -->
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
(1) 在Page1頁面輸入框輸入“asd”深浮，然后手動跳轉(zhuǎn)到Hello頁面压怠；
(2) 回到Page1頁面發(fā)現(xiàn)之前輸入的"asd"依然保留，說明頁面信息成功保存在內(nèi)存中飞苇；
? 圖1 進(jìn)入Page1頁面菌瘫，并輸入"asd"
? 圖2 跳轉(zhuǎn)到Hello
? 圖3 返回Page1頁面，輸入框數(shù)據(jù)會被保留
當(dāng)然布卡，也可以通過動態(tài)設(shè)置route.meta的keepAlive屬性來實(shí)現(xiàn)其他需求雨让，
借鑒一下 vue-router 之 keep-alive，作者：RoamIn這篇博客中的例子：
- 首頁是A頁面
- B頁面跳轉(zhuǎn)到A忿等，A頁面需要緩存
- C頁面跳轉(zhuǎn)到A栖忠，A頁面不需要被緩存
思路是在每個路由的beforeRouteLeave(to, from, next)鉤子中設(shè)置to.meta.keepAlive：
A的路由：
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被緩存
}
}
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = true; // B 跳轉(zhuǎn)到 A 時(shí)，讓 A 緩存贸街，即不刷新
next();
}
};
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = false; // C 跳轉(zhuǎn)到 A 時(shí)讓 A 不緩存庵寞，即刷新
next();
}
};
keep-alive生命周期鉤子函數(shù)：activated、deactivated
使用<keep-alive>會將數(shù)據(jù)保留在內(nèi)存中薛匪，如果要在每次進(jìn)入頁面的時(shí)候獲取最新的數(shù)據(jù)皇帮，需要在activated階段獲取數(shù)據(jù)，承擔(dān)原來created鉤子中獲取數(shù)據(jù)的任務(wù)蛋辈。
