首先感谢 Vue 全站缓存之 keep-alive : 动态移除缓存 给我的灵感,与此同时也解决另外一种场景下清除缓存的问题(
<router-view key={this.$route.fullPath} />
)
一、keep-alive 原理
先贴上 keep-alive 主要实现的源码
清除缓存三部曲:
- 将实例 $destroy()
- 清除 cache 对应的 Vnode
- 删除 keys 中对应的 key
二、缓存组件的方式
- 直接将被缓存的组件放到
keep-alive
组件中即可
这种方式缓存,在源码这里体现
- 在
keep-alive
上添加 included / exclude,具体原理,上面源码已经解释了
- 上面两种缓存路由的方式,存在很大的问题,不同的路由指向一个组件的时候,发现第二个组件和第一个组件是同一个组件,以下是解决方案,就是在router-view 上添加key,原理在下面
其原理很简单,下面代码,一看便知
首先获取 keep-alive 子组件中 有木有key == null,在 我们已经设置了 key,看下面的三言表达式,key 实则就是 route.fullPath 来实例化的,不同的 route.fullPath不同,也会被实例化的
三、清除缓存
上面已经讲清楚了,缓存原理和清除缓存的原理了,那咱么就撸起袖子,撸吧
先解决前两种已经被缓存的组件,这里我不多说了,直接贴源码吧
但是上面的代码解决
<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 排版