let <Keep-Alive> :include can recognize the key attribute of its children

[majoson-chen]

What problem does this feature solve?

此提议允许 KeepAlive 根据组件的 key 主动地舍弃某些已经不需要被缓存的节点。
This proposal allows KeepAlive to actively discard some nodes that no longer need to be cached based on the component's `key'.

我有一个组件，在KeepAlive下将其 key 属性设置为 route.fullPath，就可以根据路由参数的不同显示出不同的页面，于此同时都可以被KeepAlive缓存，但是如果同时缓存的页面过多，会导致性能下降。所以我本来打算设置include属性来控制显示哪些key，这样就可以让 KeepAlive 选择性地丢弃某些已经被缓存的组件（通过动态修改 include数组的方式），但是 KeepAlive 好像并不支持对 key 属性的识别（根据文档的描述，默认使用 name 属性来识别组件）？

I have a component that sets its key property to route.fullPath under KeepAlive to show different pages depending on the different routing parameters, and can be cached at the same time, but if too many pages are cached at the same time, performance will be degraded. So I was going to set the include property to control which keys are displayed so that KeepAlive can selectively discard some cached components (by dynamically modifying the include array), but KeepAlive doesn't seem to support the identification of key properties (by default, the name property is used to identify components as described in the document)?

What does the proposed API look like?

<router-view v-slot="{ Component }">
    <keep-alive :include_key=["fullPathA", "fullPathB"]>
        <component :key="$route.fullPath" :is="Component" />
    </keep-alive>
</router-view>

Later, we can dynamically modify include_ key array to control which components need to be cached

[majoson-chen]

#7930

[KaygNas]

I need this feature too, try finding way out but it turns out there is not.

[sunxi1997]

如果 pruneCacheEntry 可以直接 expose 出来, 外部调用是不是更好?

[tomina1]

You can achieve manual operation by wrapping the Component function, reading the corresponding type attribute, assembling the name based on the ID, and then using h to rebuild the vnode and cache it, combined with the include attribute

[AndreBooysen]

please implement something to remove cached components via key. In my scenario I open dashboards (example /dashboard/:id) in different tabs. The users need to be able to tab between the dashboards without having to reload them (dashboards keeping their state). Everything works great except being able to remove the component from the Keep-alive cache when a tab is closed.

[LIUSHUAI2018]

我也需要这样的功能

[aiqin-bao]

Is it possible to use path instead of fullPath? because fullPath has query params