keepalive能否支持根据key来配置如何处理缓存

[xq5273508]

What problem does this feature solve?

我有一个类似于qq聊天的窗体，聊天框需要缓存用户行为（滚动条位置、输入框内容等），keepalive渲染的组件都是同一个，只是加了不同的key，用keepalive可以实现我的需求的，当我关闭某个用户的聊天窗口时，配置include时缓存是没法清除；
我的组件结构如下：

<keep-alive :include="included">
    <chat v-if="_interlocutor.Key===interlocutor" :interlocutor="_interlocutor"
                      :key="_interlocutor.Key" v-for="_interlocutor in interlocutors"/>
</keep-alive>

现在只能通过_vnode.componentInstance获取到keys,和cache，在程序中自己来处理。处理起来比较麻烦。

What does the proposed API look like?

看代码发现include和exclude的配置都是判断的组件name，能否增加include和exclude对key的支持。

[posva]

Duplicate of #8028

[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

[cmtter]

我实现了一个方案：重构keepAlive
https://gitee.com/wangxiufu/cmtter-vue-cli/blob/master/cli/appTemplates/layout/components/router/KeepAlive.jsx