keep-alive: include/exclude components by component key attribute

[losadaem]

What problem does this feature solve?

The include and exclude props allow components to be conditionally cached only by component name. If we want to reuse components but force replacement using the key attribute, there is no control over which components we want to keep-alive only matching components by their name.

What does the proposed API look like?

https://jsfiddle.net/9nk92wuy/

[freeloopmko687]

What problem does this feature solve?

The include and exclude props allow components to be conditionally cached only by component name. If we want to reuse components but force replacement using the key attribute, there is no control over which components we want to keep-alive only matching components by their name.

What does the proposed API look like?

https://jsfiddle.net/9nk92wuy/

大神你好，为啥用keep-alive 包含router-view的时候key配合include不起作用呢？

[SamuelYaron]

I would love this feature to be added to Vue since it is a critical feature needed for switching from our old framework to Vue! Are there any notions about if and when the proposed pull request might be merged?

[waldonUB]

虽然问题隔得有点久，但目前我已经简单实现了一个方案。

概要：

因为keep-alive标签是不会被渲染的，所以通过ref等方式无法获取。只能通过在keep-alive包含的组件中获取父节点，来获取keep-alive中的数据。

步骤：

查看组件缓存的对象

这里对象的key就是我们在缓存中绑定key，如果没有绑定key，就随机生成。（这里的生成规则我暂时还没有去了解）

在原型上增加一个过滤规则

这里我只实现了一个可以根据同名组件不同key来限制最大缓存数量的方法

Vue.prototype.$destroyKey = function () {
  let cache = this.$vnode.parent.componentInstance.cache
  let keys = this.$vnode.parent.componentInstance.keys
  // 忽略掉组件为null的key值
  let cacheLen = 0
  for (let item in cache) {
    // cache对象原型没有东西，无需调用hasOwnProperty
    if (cache[item]) {
      cacheLen++
    }
  }
  if (cacheLen > this.keyMax) {
    let outKey = keys.shift()
    cache[outKey].componentInstance.$destroy()
    cache[outKey] = null
  }
}

在切换组件时调用规则

1. 在keep-alive缓存中使用动态组件

activated () {
    this.$destroyKey()
  }

2. 在路由页面切换中使用

beforeRouteUpdate (to, from, next) {
    this.$destroyKey()
  }

简单示例

https://codepen.io/waldonUB/pen/xvOgQB?editors=1111

参考

• keep-alive的实现
• issue6509