是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們。和相似，是一個(gè)抽象組件：它自身不會渲染一個(gè) DOM 元素，也不會出現(xiàn)在父組件鏈中。
prop:
include: 字符串或正則表達(dá)式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會被緩存。
在2.1.0版本Vue中
常見用法：
// 組件exportdefault{name:'test-keep-alive',data(){return{includedComponents:"test-keep-alive"}}}
結(jié)合router，緩存部分頁面
使用$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頁面輸入框輸入“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，作者：caroly這篇博客中的例子：
首頁是A頁面
B頁面跳轉(zhuǎn)到A，A頁面需要緩存
C頁面跳轉(zhuǎn)到A，A頁面不需要被緩存
思路是在每個(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();? ? }};
