最近在开发中遇到的一个小问题,在退出登录账号之后需要清除某些组件的缓存,然后发现了一个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.parent.componentInstance这种方式进行获取keys、cache并清除