Vue黑科技--从原理层面清除 keep-alive 缓存的组件

首先感谢 Vue 全站缓存之 keep-alive ： 动态移除缓存 给我的灵感，与此同时也解决另外一种场景下清除缓存的问题（<router-view key={this.$route.fullPath} />）

一、keep-alive 原理

先贴上 keep-alive 主要实现的源码

清除缓存三部曲：

1. 将实例 $destroy()
2. 清除 cache 对应的 Vnode
3. 删除 keys 中对应的 key

二、缓存组件的方式

1. 直接将被缓存的组件放到 keep-alive 组件中即可

这种方式缓存，在源码这里体现

2. 在 keep-alive 上添加 included / exclude，具体原理，上面源码已经解释了

3. 上面两种缓存路由的方式，存在很大的问题，不同的路由指向一个组件的时候，发现第二个组件和第一个组件是同一个组件，以下是解决方案，就是在router-view 上添加key，原理在下面

其原理很简单，下面代码，一看便知

首先获取 keep-alive 子组件中 有木有key == null，在 我们已经设置了 key，看下面的三言表达式，key 实则就是 route.fullPath 来实例化的，不同的 route.fullPath不同，也会被实例化的

三、清除缓存

上面已经讲清楚了，缓存原理和清除缓存的原理了，那咱么就撸起袖子，撸吧

1. 先解决前两种已经被缓存的组件，这里我不多说了，直接贴源码吧

2. 但是上面的代码解决 <router-view key={this.$route.fullPath}/> 不是很友好，我又开始深入研究 keep-alive 源码，在不停的 debugger 中，我发现 cache keys 居然存在 keep-alive 实例上，这个实例不能简单的从被移除的组件实例中获取到，那我的解决方式，是将 keep-alive 通过 ref 将实例缓存的 vuex中，然后每次清除的时候，从 vuex 中获取到这个实例，寻找到 keep-alive 实例对应的 cache 和 keys cache 和 keys 在 keep-alive 实例 的位置如下

感谢您认真阅读，小弟如果在哪些方面分析的不到位或者有错，请多多指教😁

本文使用 mdnice 排版