<keep-alive>是Vue的內(nèi)置組件宫仗，能在組件切換過程中將狀態(tài)保留在內(nèi)存中帆锋，防止重復(fù)渲染DOM。
<keep-alive>包裹動態(tài)組件時俭缓，會緩存不活動的組件實例，而不是銷毀它們酥郭。和<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屬性來實現(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 時坯钦，讓 A 緩存，即不刷新
next();
}
};
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = false; // C 跳轉(zhuǎn)到 A 時讓 A 不緩存侈玄，即刷新
next();
}
};
親測有效哦~
keep-alive生命周期鉤子函數(shù)：activated婉刀、deactivated
使用<keep-alive>會將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁面的時候獲取最新的數(shù)據(jù)序仙，需要在activated階段獲取數(shù)據(jù)突颊，承擔(dān)原來created鉤子中獲取數(shù)據(jù)的任務(wù)。
