1. keep-alive 簡述
keep-alive是vue中的內(nèi)置組件脑溢，能在組件切換過程中將狀態(tài)保留在內(nèi)存中蔼囊，防止重復渲染DOM
keep-alive 包裹動態(tài)組件時衣迷，會緩存不活動的組件實例，而不是銷毀它們
keep-alive可以設(shè)置以下props屬性：
- include - 字符串或正則表達式壶谒。只有名稱匹配的組件會被緩存
- exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存
- max - 數(shù)字让禀。最多可以緩存多少組件實例
2. 用法
當我們在某些場景下不需要讓頁面重新加載時陨界，我們可以使用keepalive
在路由中設(shè)置 keepAlive 屬性判斷是否需要緩存
關(guān)于keep-alive的基本用法：
<keep-alive include="a,b">
<component />
</keep-alive>
// 數(shù)組、正則使用 v-bind
<keep-alive :include="['a','b']">
<component />
</keep-alive>
<keeep-alive> 要求被切換到的組件有自己的名字菌瘪，這個 name 指的是 router 中的，建議將 router 與 component 的 name 設(shè)成一樣
匹配首先檢查組件自身的 name 選項糜工，如果 name 選項不可用录淡，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)捌木，匿名組件不能被匹配
設(shè)置了 keep-alive 緩存的組件嫉戚，會多出兩個生命周期鉤子（activated與deactivated）
-
首次進入組件時：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated
-
再次進入組件時：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated
刷新數(shù)據(jù)：
1）每次組件渲染的時候澈圈，都會執(zhí)行beforeRouteEnter
beforeRouteEnter(to, from, next) {
next(val=> {
val.getData() // 獲取數(shù)據(jù)
})
}
2）在 keep-alive 緩存的組件被激活的時候帆啃，都會執(zhí)行 actived
actived() {
this.getData() // 獲取數(shù)據(jù)
}
轉(zhuǎn)載于：https://juejin.cn/post/7176103887445688379
