keep-alive

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容