keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節省性能,由于是一個抽象組件,所以在v頁面渲染完畢后不會被渲染成一個DOM元素.
區別
不使用 keep-alive 時 每次切換組件 會重復銷毀組件---創建組件 重復發起請求調取數據
使用 keep-alive 后 每次切換組件 只會在第一次觸發組件 created 生命周期函數 并且 離開該組件時不會銷毀該組件
keep-alive 的生命周期
1.初次進入時:created > mounted > activated;退出后觸發 deactivated
2.再次進入:會觸發 activated;
keep-alive 的參數
1.include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
2.exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
3.max - 數字。最多可以緩存多少組件實例。
include 、exclude 允許組件有條件地緩存。3種寫法
<keep-alive include="a,b">
<keep-alive :include="/a|b/">
<keep-alive :include="['a', 'b']">
切記!include配置的name,是組件的name,而不是router上的name!
切記!include配置的name,是組件的name,而不是router上的name!
<keep-alive include ="組件的name">
</keep-alive>
也可以通過路由表中的mate屬性 配置哪些需要緩存
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要緩存
}
},
]
})
<keep-alive >
<router-view v-if="this.$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!this.$route.meta.keepAlive"> </router-view>
注意如果是動態路由使用 keep-alive 需要給 router-view 設置key值
動態路由大多是使用一個組件 只是數據不同 所以key值 直接設置自己的路由信息即可
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
同一個頁面有時候被緩存,有時候不被緩存
結合vuex將需要緩存的頁面進行管理
A列表->Bform表單(有個選擇地址)->通過點擊地址來到C,
C在這里選擇完地址,返回->B(這個應該是剛才緩存的那個表單)->A
app.vue
<keep-alive :include="cachePage">
<router-view> </router-view>
</keep-alive>
store.js
......
const state = {
cachePage: "",
};
const mutations = {
cachePageFun(state, val) {
state.cachePage = val;
},
......
a.vue
.......
this.$store.commit("cachePageFun", "bb");
this.$router.push("/b");
.....
b.vue
.......
name: "bb",
.......
goList() {
this.$store.commit("cachePageFun", "");
this.$router.push("/a");
}
.....
c.vue,正常跳轉返回B就行
<router-link to="/b">bbbb</router-link>
問題:
<keep-alive include="A,B,C" :max="2">
依次進入A,B,C頁面,緩存中是那 2 個頁面
答:
keep-alive緩存類似隊列效果,先進先出,依次進入A,B,此時緩存中是A,B,由于max=2,最多可以緩存 2 個組件實例,再次進入C時,將最先進入緩存的A,給踢出去,先進先出。
問題:被緩存的頁面生命周期
答:
A,B均為首次進入:
進入頁面A開始:
beforeCreate -> created -> beforeMount-> mounted-> activated
離開A去B時(銷毀時):
B: beforeCreate -> B: created -> B: beforeMount -> A: deactivated -> B: mounted -> B: activated
如果都不是首次進入:
從B進入頁面A開始:B: deactivated -> A: activated
從A進入頁面B開始:A: deactivated -> B: activated