详解vue路由的keepAlive缓存之----如何暴力清除缓存

505 阅读1分钟

最近在开发中遇到的一个小问题,在退出登录账号之后需要清除某些组件的缓存,然后发现了一个vue实例属性:$vnode。以下是我的总结

已缓存的路由:通过this.$vnode.parent.componentInstance可以找到实例的父路由(上一级路由)的keep-alive设置的缓存路由,其中已缓存的路由在keys属性和cache属性上。

keys:个数组,已缓存的路由组件,会在keys存储的是一个number类型的值,我个人认为是一个类似组件name作用的标记值,清除缓存需要把这个标记值去掉,这个值和this.$vnode.componentOptions.Ctor.cid是一样的,所以可以获取cid的值然后对比一下就可以清除keys里的值了。

cache:个对象,已缓存的路由组件会在cache存储一个key为cid,值为路由组件的虚拟节点,同样是通过cid清除。

结果:在清除对应的keys值和cache值,成功的清除了对应的路由缓存,再次切换到对应路由组件时又触发了create生命周期并重新缓存了对应路由,完全符合了我的需求。

疑问:

1,掘金这个编辑器是不是有个bug,当我在某段话插入值时会覆盖后面的值。

2,在父组件的this.vnode也有componentInstance,但是我没有在其中找到keysache。导致不知道在父路由如何清除对应的缓存。只能在拥有同样的父路由通过this.vnode也有componentInstance,但是我没有在其中找到keys、ache。导致不知道在父路由如何清除对应的缓存。只能在拥有同样的父路由通过this.vnode.parent.componentInstance这种方式进行获取keys、cache并清除