Subscribe on changes!

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

avatar
Mar 21st 2023

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

avatar
Mar 21st 2023

#7930

avatar
Apr 14th 2023

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

avatar
May 10th 2023

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

avatar
Jan 18th 2024

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