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

5,194 阅读2分钟

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

一、keep-alive 原理

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

keep-alive 原理
keep-alive 原理

清除缓存三部曲:

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

二、缓存组件的方式

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

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

缓存组件1-源码
缓存组件1-源码
  1. keep-alive 上添加 included / exclude,具体原理,上面源码已经解释了
缓存组件2
缓存组件2
  1. 上面两种缓存路由的方式,存在很大的问题,不同的路由指向一个组件的时候,发现第二个组件和第一个组件是同一个组件,以下是解决方案,就是在router-view 上添加key,原理在下面
缓存组件3
缓存组件3

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

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

缓存组件3--原理
缓存组件3--原理

三、清除缓存

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

  1. 先解决前两种已经被缓存的组件,这里我不多说了,直接贴源码吧 清除缓存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 实例 的位置如下

清除缓存2
清除缓存2

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

本文使用 mdnice 排版