Vue keep-alive 組件的 key

背景

今天在看開源框架 vue-element-admin 發現了一個有意思的使用方法——給 keep-alive 組件綁定了 key。對於這個的作用不是很理解，查閱了相關的資料，記錄總結一下。

<template>
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews">
      <router-view :key="key" />
    </keep-alive>
  </transition>
</template>
<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path // 這里為什么要綁定key呢？？？因為當路由變化時（例如：切換用戶，訪問同一頁面時），強制組件刷新
    }
  }
}
</script>

keep-alive 和 router-view 介紹

• keep-alive
  先說下 keep-alive 這個組件：當組件在 <keep-alive> 內被切換，，會緩存不活動的組件實例，而不是銷毀它們。
  這樣下次再切換回來，可以保存組件的狀態或者避免重新渲染。
  換句話說，它的作用就是緩存組件，提高性能的。
• router-view
  router-view 的作用很單一，用來顯示與 url 對應的組件。

會有什么問題

用 keep-alive 復用相同組件，可以提升性能，但在一定的業務場景下，這種方式可能會發生問題。思考以下兩種路由切換的場景：

1. page/1 --切換--> page/2
2. page?id=1 --切換--> page?id=2
   以上這兩種情況，因為使用 keep-alive 緩存，那么當路由進行切換時，將不在執行created, mounted之類的鈎子, 數據不會刷新。
   所以就有我們上文提到，給router-view綁定 key 為 路由地址的解決方式。

解決問題的方式

1. 不設置 router-view 的 key 屬性

• 添加 beforeRouteUpdate 鈎子來執行相關方法拉去數據。
• activated 組件激活時拉取數據。

2. 設置 router-view 的 key 屬性值為 $route.path

1. page/1 --切換--> page/2 // $route.path不同，強制不復用
2. page?id=1 --切換--> page?id=2 // $route.path相同，設置無效

3. 設置 router-view 的 key 屬性值為 $route.fullPath

1. page/1 --切換--> page/2 // $route.fullPath不同，強制不復用
2. page?id=1 --切換--> page?id=2 // $route.fullPath不同，強制不復用