Vue 之 keepAlive 动态管理页面缓存

对于 Vue 项目，提到页面缓存，大家一定都会想到 keepAlive ，想必各模块的前端er们在设计页面结构的时候应该都有用到过。

在 template 中，如果页面的 组件 被 组件包裹住的话，那所有该路由下的子路由页面对应的视图组件都会被缓存下来。

那么，也就要用到另外两个 keepAlive 专属的钩子函数 activated 和 deactivated。

当页面被缓存下来的时候，有activated钩子和created钩子函数时，这两个函数会被同时触发，此时应该使用 activated 代替 created ，因为 created 只会触发一次。当离开该页面时，就不会触发destroyed生命钩子去销毁组件，而触发的是deactivated钩子将组件失活。

想必以上内容，大家都烂熟于心。它能帮我们实现缓存一些组件的状态，以避免反复重新渲染导致的性能问题。

但是，keep-alive 用了之后，那它下面的子路由组件就全都会有缓存，这显然有些不灵活。也没办法满足我们系统的复杂性。比如下面这种业务场景，你一定遇到过：

有三个页面：首页、列表页、详情页。

1. 从首页进入列表页，列表页应该是初始状态，即没有页面缓存。
2. 在列表页操作筛选、搜索、分页等控件，然后点击一项进入其详情页，然后详情页点击返回到列表页，那么此时列表页应该呈现刚才的筛选、搜索、分页等控件的状态，即有页面缓存。

那么像这样的情况，同一个组件，我们有时候需要缓存，有时候不需要缓存…… 所以，该怎么动态的去控制这个页面的缓存呢？

有小伙伴一定会说：Vuex。

是的，Vuex 是个常用的方案。把列表页页面上的状态值存到 Vuex 里，每次在改变状态值就通过 commit mutation 去改变，这样一来，你需要页面有缓存，就直接去 store 里取。当你不需要页面缓存的时候就去清除缓存，重置 Vuex 里的这些状态值就可以。但是这样做的缺点也显而易见，如果页面上的状态值比较多结构比较复杂时，就会需要大量的篇幅去处理 Vuex，代码势必会比较冗杂难维护。

所以接下来我介绍另一种方案：

看过 Vue 源码的同学，会发现 keepAlive 的实现是将组件存放在caches数组当中，这个时候我们对数组进行操作，就可以做到前往其他页面的时候控制该缓存还是不该缓存，这样就可以实现灵活动态的使用缓存。

参考源码片段：https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js

所以，根据 keepAlive 的设计原理，我们定义一个清除 keepAlive 的缓存状态的方法：

const removeKeepAliveCacheForVueInstance = (vueInstance:any) => {
  let key =
    vueInstance.$vnode.key ??
    vueInstance.$vnode.componentOptions.Ctor.cid + (vueInstance.$vnode.componentOptions.tag ? `::${vueInstance.$vnode.componentOptions.tag}` : "");
  let cache = vueInstance.$vnode.parent.componentInstance.cache;
  let keys = vueInstance.$vnode.parent.componentInstance.keys;
  if (cache[key]) {
    vueInstance.$destroy();
    delete cache[key];
    let index = keys.indexOf(key);
    if (index > -1) {
      keys.splice(index, 1);
    }
  }
}

核心思想就是通过 vueInstance.$vnode.parent.componentInstance 获取到 keepAlive 的实例，清除cache 的同时，destory 掉当前实例。

定义好该方法之后，接下来就需要导航守卫 beforeRouteLeave 来配合了。即，在需要动态处理缓存的页面中使用路由守卫 beforeRouteLeave ，根据即将要去的页面来判断是否要清除 keepAlive 缓存即可。

比如，就拿上面的例子来讲，我在列表页定义 beforeRouteLeave，在其中判断如果要去详情页，就不清除缓存，其余情况都要清除缓存。

// 判断要去的页面不是/detail页，就都应该删除keepAlive的缓存状态
beforeRouteLeave(to, from, next) {
  if(to.path !== '/detail'){
    removeKeepAliveCacheForVueInstance(this)
  }
  next()
}