不同路由复用同一组件时，vue缓存(keep-alive) 必须同时删除 的解决方案

吐槽

我们管理后台用keepAlive结合tag做页面缓存是很常见的情形，但是试用了众多开源vue中后台模板，发现都没解决不同路由共用同一组件keepAlive缓存不能分别清除的问题。最经典的场景是编辑页打开多个分别编辑不同id的数据信息。不知道是不是众位作者感觉这一块不重要，不需要花力气改，还是里面有深坑，不适合改。

分析原因

用keepAlive给路由做缓存时，一般都是通过include/exclude匹配组件名进行缓存匹配，刷新tag时也是通过动态更改include/exclude来实现删除缓存，重新缓存。而不同路由共用同一组件时(如详情页路由fullPath分别是info/1,info/2组件都是info.vue),组件是相同的，组件名也是相同的。所以缓存清除时是一块清除的。

可行的方案

1. 通过动态改变组件名来使相同组件在不同路由下使用不同组件名。
2. 自定义key为fullPath,通过组件的key进行缓存判断

考虑到更改组件名确保唯一，会导致vue devtools中的组件名称过于复杂，不好后期调试，本着最优解原则，选择了方案2.通过组件的key进行缓存判断

解决问题

查看vue源码找到include/exclude的对应逻辑

vue 源码文件位置github.com/vuejs/core/…

include/exclude的对应逻辑分为三块

1. 定义props 和 type

1. 渲染组件时判断是否需要缓存

1. 监听include/exclude改变时动态清除缓存

仿照include/exclude添加includeKey excludeKey

1.定义props 和 type

export interface MeKeepAliveProps {
  include?: MatchPattern;
  exclude?: MatchPattern;
  max?: number | string;
  includeKey?: MatchPattern;
  excludeKey?: MatchPattern;
}

props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number],
    includeKey: [String, RegExp, Array],
    excludeKey: [String, RegExp, Array],
},

1. 更改渲染组件时的缓存判断逻辑

const key = vnode.key == null ? comp : vnode.key;//key的定义从下面移到了上面
const { include, exclude, includeKey, excludeKey, max } = props;
if (
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name)) ||
(includeKey && (typeof key !== 'string' || !matches(includeKey, key))) ||
(excludeKey && typeof key === 'string' && matches(excludeKey, key))
) {
    current = vnode;
    return rawVNode;
}

1. 监听includeKey/excludeKey改变时动态清除缓存

function pruneCacheByKey(filter?: (key: CacheKey) => boolean) {
  cache.forEach((vnode, key) => {
    if (!filter || !filter(key)) {
      pruneCacheEntry(key);
    }
  });
}
// prune cache on includeKey/excludeKey prop change
watch(
  () => [props.includeKey, props.excludeKey],
  ([includeKey, excludeKey]) => {
    includeKey && pruneCacheByKey((key) => typeof key === 'string' && matches(includeKey, key));
    excludeKey &&
      pruneCacheByKey((key) => {
        return typeof key !== 'string' || !matches(excludeKey, key);
      });
  },
  // prune post-render after `current` has been updated
  { flush: 'post', deep: true },
);

这样我们就算改造完成，可以愉快的使用key进行缓存判断了。includeKey和include同时使用时是&&的关系 excludeKey和exclude同时使用时是||的关系。

如何放到我们代码中

上面是在vue源码中做的改动，真实场景中我们不可能更改node_modules中的vue源码，应该把keepAlive迁移到我们的项目中作为一个独立组件使用。我们需要把更改后keepAlive文件和keepAlive import的模块都一块搬到我们的代码中，注册为自定义组件使用，搬的时候要注意一点，迁移的东西如果存在更改当前文件变量的，要想办法让其更改的还是vue中的模块的变量而不是你copy过来的模块中的变量，否则会有问题。

我已经为大家做好了迁移，并且放到了开源项目meadmin-template中，大家只需要把meKeepAlive文件夹搬到自己的项目下就能愉快的使用。 文件夹位置github.com/meadmin-cn/…

搬移组件代码的时候顺手给我的项目点个star,互帮互助嘛。项目中也有一些其他我认为很好用的黑科技(比如自动按需引入组件，按组件定义语言包，elment-plus table无入侵二次封装支持自定义列+打印)大家空闲时间可以看文档试用。