vue-keepAlive缓存清除方法

3,287 阅读1分钟
/**
 * @param {Obejct} to 目标路由
 * @param {Obejct} from 当前路由
 * @param {Function} next next 管道函数
 * @param {VNode} vm 当前组件实例
 * @param {Boolean} manualDelete 是否要手动移除缓存组件,弥补当路由缺少 level 时,清空组件缓存的不足
 */
function destroyComponent (to, from, next, vm, manualDelete = false) {
  // 禁止向上缓存
  if (
      (
        from &&
        from.meta.level &&
        to.meta.level &&
        from.meta.level > to.meta.level
      ) ||
      manualDelete
    ) {
    const { data, parent, componentOptions, key } = vm.$vnode
    if (vm.$vnode && data.keepAlive) {
      if (parent && parent.componentInstance && parent.componentInstance.cache) {
        if (componentOptions) {
           const cacheCompKey = !key ?
            componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : key
          const cache = parent.componentInstance.cache
          const keys = parent.componentInstance.keys
          const { include, index } = inArray(cacheCompKey, keys)
          // 清除缓存 component的key
          if (include && cache[cacheCompKey]) {
            keys.splice(index, 1)
            delete cache[cacheCompKey]
          }
        }
      }
    }
    // 销毁缓存组件
    vm.$destroy()
  }
  next()
}