Vue keepalive 组件的 key Better

背景

今天在看开源框架 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不同，强制不复用