Skip to content

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

@majoson-chen

Description

@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

Activity

linked a pull request that will close this issue on Mar 21, 2023
majoson-chen

majoson-chen commented on Mar 21, 2023

@majoson-chen
Author
KaygNas

KaygNas commented on Apr 14, 2023

@KaygNas

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

sunxi1997

sunxi1997 commented on May 10, 2023

@sunxi1997

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

tomina1

tomina1 commented on Jan 18, 2024

@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

AndreBooysen commented on May 15, 2024

@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

LIUSHUAI2018 commented on Aug 13, 2024

@LIUSHUAI2018

我也需要这样的功能

aiqin-bao

aiqin-bao commented on Aug 16, 2024

@aiqin-bao

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @edison1105@aiqin-bao@AndreBooysen@sunxi1997@LIUSHUAI2018

      Issue actions

        let <Keep-Alive> :include can recognize the `key` attribute of its children · Issue #7928 · vuejs/core