Vue-动态控制 keep-alive 缓存

[PleaseStartYourPerformance]

const removeKeepAliveCacheForVueInstance = (vueInstance:any) => {
  // 找到组件实例在caches里的key
  let key =
    vueInstance.$vnode.key ??
    vueInstance.$vnode.componentOptions.Ctor.cid + (vueInstance.$vnode.componentOptions.tag ? `::${vueInstance.$vnode.componentOptions.tag}` : "");
  // 找到keep-alive实例里的cache 和 keys集合
  let cache = vueInstance.$vnode.parent.componentInstance.cache;
  let keys = vueInstance.$vnode.parent.componentInstance.keys;
  // 如果找到当前组件实例的缓存，就destory销毁实例、删除cache、删除key
  if (cache[key]) {
    vueInstance.$destroy();
    delete cache[key];
    let index = keys.indexOf(key);
    if (index > -1) {
      keys.splice(index, 1);
    }
  }
}

它的核心思想就是通过 vueInstance.$vnode.parent.componentInstance 获取到 keep-alive 的实例，然后清除你想清除的组件实例的 key 对应的 cache ，同时 destory 掉它。

定义好该方法之后，接下来就需要导航守卫 beforeRouteLeave 来配合了。即，在需要动态处理缓存的页面中使用路由守卫 beforeRouteLeave ，根据即将要去的页面来判断是否要清除 keep-alive 缓存即可。

比如，就拿上面的例子来讲，我在列表页定义 beforeRouteLeave，在其中判断如果要去详情页，就不清除缓存，其余情况都要清除缓存。

// 判断要去的页面不是/detail页，就都应该删除keep-alive的缓存状态
beforeRouteLeave(to, from, next) {
  if(to.path !== '/detail'){
    removeKeepAliveCacheForVueInstance(this)
  }
  next()
}