Custom cache strategy and matching rules for KeepAlive

[HcySunYang]

Discussion Thread for "Custom cache strategy and matching rules for KeepAlive"

Links

• RFC Proposal
• Full Rendered Proposal

[wuyuweixin]

We really need these features.

[wuyuweixin]

Hope to merge soon.

[posva]

This is nice.

I'm only worried about the pruneCacheEntry(): it's added later on which makes it easy to call before it exists and also harder to type.
It's also weird to be able to only call that function but not all the other ones that were added by the user manually.

Wouldn't it be possible to only have the delete() method and let Vue wrap it at runtime? This would make it always callable.

Another solution would be calling a method on the KeepAlive component with a ref but I'm unsure this is feasible and it's not a good practice anyway

What was the point of adding onBeforeActivate()? There is nothing on the motivation section about them

[tony-gm]

Yes, there is no reason to override or add another hooks base on any current API lifecycle hooks.

[hezhongfeng]

In vue2.x I can custom a component to replace KeepAlive.But in vue3.x its impossible.
Looking forward to this feature

[yuntian001]

vue3 不能替换但是可以用自定义组件 实现 已经有人这么干了https://juejin.cn/post/7140068886598123557

[cchangwen]

为什么不通过 vite 替换源码

[cchangwen]

替换源码是真的爽到家了
function pruneCacheEntry(key) {
to
var pruneCacheEntry = sharedContext.prune = function (key) {

[cchangwen]

https://cn.rollupjs.org/plugin-development/#transform

[Caleb-Xu]

I realy realy need it, otherwise I would need to change a lot of project code 😢

[wcldyx]

现在可以用了吗

[pavlexander]

Hello, I have to say in advance that I don't quite understand the proposed solution fully. It looks too complex for the task that I/other people want to accomplish based on what I have read (vuejs/core#2077, https://stackoverflow.com/questions/70113769/manually-remove-and-destroy-a-component-from-keep-alive, https://stackoverflow.com/questions/65163775/how-to-destroy-unmount-vue-js-3-components, https://stackoverflow.com/questions/68995879/vue-3-force-unmount-when-deactivated) to name a few.

The current situation is - most of the solutions ether involve using $destroy() method which is now obsolete in vuejs3 or rely on using if-else conditions for keep-alive component itself or do not actually solve the problem at all or rely on low-level hacks (which I was not able to replicate in latest vuejs3 version) therefore are obsolete..

For example, if we have cached instances of the same Item component (path: /item/{id}) , that are cached based on $route.fullPath as a key:

      <router-view v-slot="{ Component }">
        <keep-alive :include="Item,SomethingElse">
          <component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </router-view>

Given that we visited the page 3 times under different IDs:

• /item/1
• /item/2
• /item/3

Would the proposed solution allow to destroy/unmount a specific instance upon an event in app? Let's say user removed the item from the database so we want the cache of /item/2 to be cleared and never shown again - how do you accomplish it with proposed solution?

Overall it would be good to know when the solution will be implemented (or the latest status of it), given that after 2 months it's going to be a year since this topic was created.

Edit (19.01.2022)

In addition to above, I would also like to empathize on required (personally required/subjective) caching customization granularity. If I understand correctly - :max directive only allows setting the maximum general allowed number of cached pages.

So let's say we have 3 components we want to cache

• ListOfItems
• Item/{id}
• Profile

If we set (currently) maximum to 1 then every single component is allowed to have 1 cached instance. Is this correct?

In comparison, in real world scenario, for the ListOfItems and Profile we would only want/need 1 single instance of the page to be cached. But for Item - there could be many items with different Ids, so the non-1 limit would be set. An example in my original post clearly explains the idea. So, if there is no in-built way to control the maximum number of cached components PER COMPONENT, then I think it would be good if the developers were given a tool to explicitly (manually) enforce the rules of caching. I.e. allow to write a custom function/logic - when the number of cached Item components exceeds X - drop previously cached Item components.

[yuntian001]

通过key判断更新缓存已经有人实现了 https://juejin.cn/post/7140068886598123557

[tony-gm]

I have another solution, it's mini change for current API and easy to implement.

1. Provide a composoable function createKeepAliveCache, return a KeepAliveCache object.

export interface KeepAliveCache {
  include: Ref<MatchPattern | undefined>
  exclude: Ref<MatchPattern | undefined>
  max: Ref<number | string | undefined>
  cache: Map<string, VNode>
  remove: (key: string) => void
  clear: () => void
}

2. KeepAlive component, provide a new prop named cache, then user can v-bind to createKeepAliveCache() returned KeepAliveCache object.

3. User can change include,exclude,max to maniplate cache as current API (since it's a Ref), also remove(key) can remove a cache by key, clear() to clear all cache.

Here is a full example

<template>
  <button @click="onCloseTab">Close Current Tab</button>
  <button @click="onCloseAllTabs">Close All Tabs</button>
  <router-view v-slot="{ Component, route }">
    <keep-alive :cache="pageCache">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import { defineComponent, createKeepAliveCache, ref } from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    const currentPath = ref('')
    const pageCache = createKeepAliveCache()
    pageCache.include.value = ['Component1']

    function onCloseTab() {
      pageCache.remove(currentPath.value)
    }

    function onCloseAllTabs() {
      pageCache.clear()
    }

    return {
      pageCache,
      onCloseTab,
      onCloseAllTabs
    }
  }
})
</script>

I document this in a RFC , more detail please check RFC Link

And I also did a prototype implement base on this RFC, currently it's work. Implement Link

[tony-gm]

Any plan about this keep-alive RFC?

[yokiyokiyoki]

呜呜 请官方下场看看，很久了

[blakjak44]

Adding my vote for this feature

[a145789]

really need beforeDeactivate, it's really useful, any results?

[Sackeys]

I'm waiting this too for managing component states easier, I hope we'll see this feature coming this year. <3

[RobertHunter-Pluto]

To anybody still interested in this, I found a way of making it work, although it's still not super great. I'm on Vue 2.7.10 and vue-router 3.6.5.

App.vue doesn't require anything special, just a <router-link> without using $route.fullPath for a key.

The parent component within the top level router-link contains this:

<keep-alive>
  <router-view> </router-view>
</keep-alive>

max, exclude, include can be whatever you like, but don't key it based on the fullpath and don't set :max=1.

The trick is in whatever component you're rendering as a child with multiple versions, for example item/1 item/2 item/3.

Add a :key inside of the child component based on the item number, which should be supplied by the route, either inside of data or as a computed. Then watch the route itself and change the key to any new value that gets supplied. Changing the key will trigger a re-render of the child content and everything else will work as expected.

<child :key=tag></child>
...
created() {
    this.tag = this.$route.params.tag;
  },
data() {
    return {
      tag: null,
    };
  },
watch: {
    "$route.params.tag"(value) {
      // preserve back functionality, only re-render if the value is new
      if (value === undefined || this.tag === value) {
         return;
      }
      this.tag = value;
    },
  },

All of this needs to happen inside whatever is being displayed in the router-link.

There definitely needs to be a better API for managing cached state, but at the very least this avoids the most common pitfalls of having multiple child components clog up memory and ignore whatever :max you've set.

[fduser1]

I agree with @pavlexander. Many of the RFC's referenced issues (and what brought me here today) are tied to the simple fact that Vue 3 has no way to remove a single component from keep-alive's cache as we could indirectly with Vue 2's component $destroy() method.

While I appreciate the RFC author is trying to address multiple cache issues including this missing Vue 3 cache capability, the proposed RFC change is substantial and we are not seeing any incremental cache improvements because they are all tied to one big overhaul change to caching.

I think we should try to break down caching changes; as a start, at least into two parts (1) address control of removing a single item and (2) fine-grain cache control (e.g. implementation, hooks). In my opinion, #1 is a core capability of KeepAlive or any caching system.

As a suggestion on how to implement #1, we could employ the provide/inject mechanism of Vue 3 here. (Vue 2 is reaching EOL soon and is out-of-scope at this point.) KeepAlive component can provide some cache-service object and any enclosing component can inject this object. As a start, the cache-service object can provide one simple method that the component can use to remove items including itself; e.g. injectedCacheServiceObject.remove(this).

[dominikklein]

Are there any plans that this will go forward here? It's a little bit frustrating that you can not clean up the cache when you are using KeepAlive in more advanced (e.g. related to the router view). Sometimes people are using permissions or closing something then you definitely want to remove this cached entry from KeepAlive.

[leookun]

Caching cleanup for anonymous components is a very important feature for the entire Vue.

[Student414]

用KeepAlive的exclude属性控制cache的手动删除倒是可以实现精准控制cache，属于是曲线救国了。
这个方案的难点在于，KeeyAlive源码中，是通过比较Component的name与exclude中的MatchPattern是否匹配从而决定是否要删除cache的，而name一般是runtime自动生成的，并且一个Component对应一个name正常来说是固定的。所以使用exclude控制Component的删除与否，需要将name的概念改为每一个组件实例化后的唯一ID（当前也可以不使用name字段，自己新加一个字段也可）。
在v3.5.22中，getComponentName的实现如下：

function getComponentName(Component, includeInferred = true) {
  return isFunction(Component) ? Component.displayName || Component.name : Component.name || includeInferred && Component.__name;
}

此时问题就演变成了如何使每次KeeyAlive【新】渲染的组件有唯一的ID，并这个ID作为Component的name。
因此必须重新设计router以实现类似于移动端原生app的页面控制逻辑：
核心要点：
1、router.push后，RouteLocationNormalizedGeneric中要有目标路由的唯一id（我这里的字段叫做version）
2、router.back后，将之前页面的id放到exclude数组中，runtime-core会监听exclude的变化并自动删除缓存。（此时Component的name也就是唯一ID和exclude数组中记录的内容是同一维度，可以按计划匹配到key并且执行删除）
3、KeepAlive渲染之前，需要对RouterView中解构的Component进行patch（主要操作就是更新其name）

以下是我的代码，其中主要涉及router.ts和app.vue两处改动，代码中夹杂了一些判断软返回还是硬返回、控制过场动画等等功能，不影响keepalive部分的逻辑，仅供参考。

文件：router_transition_enhanced.ts

import useSerial from '@/views/app/com.student414.digitaloffice/workflow/useSerial'
import type {
    NavigationGuardNext,
    RouteLocationNormalizedGeneric as _RouteLocationNormalizedGeneric,
    Router,
} from 'vue-router'

type RouteLocationNormalizedGeneric = _RouteLocationNormalizedGeneric & {
    version: string
}

const SessionStorage_key_Router_Enhanced_History = 'RTE_History' // Router Transition Enhanced History
const idSerial = useSerial(0, 1)
const debug = !true

type RouteRecord = Partial<RouteLocationNormalizedGeneric> & { id: number }
type TransitionEnhancedRouter = Router & {
    __proto__: any
    onTransitionEnd: () => void
    getTransitionName: () => string
    pruneCallback: (from: RouteLocationNormalizedGeneric) => void
}

function transitionEnhance(origin: Router): TransitionEnhancedRouter {
    // create a new instance from origin
    const router = Object.create(origin) as TransitionEnhancedRouter
    const routeNokeepCountMap = new Map<string, number>()

    let transitionName: string = ''
    let history: RouteRecord[] = []
    let isInit = false
    let offset = 100
    let softNavButtonUsed = 0 // in millisecond

    const removeLastRouterPath = function (n = 1) {
        if (n > 0) {
            for (let i = 0; i < n; i++) {
                history.pop()
            }

            sessionStorage.setItem(
                SessionStorage_key_Router_Enhanced_History,
                JSON.stringify(history),
            )
        }
    }

    router.push = function (): any {
        offset = 1
        softNavButtonUsed = new Date().getTime()

        router.__proto__.push.call(this, ...arguments)
    }

    router.replace = function (): any {
        offset = 0
        softNavButtonUsed = new Date().getTime()

        router.__proto__.replace.call(this, ...arguments)
    }

    router.go = function (n: number) {
        if (n > 0) {
            console.error('router.go not supported now')
            return
        }

        offset = n
        softNavButtonUsed = new Date().getTime()

        router.__proto__.go.call(this, n)
    }

    router.back = function () {
        offset = -1
        softNavButtonUsed = new Date().getTime()

        router.__proto__.back.call(this, ...arguments)
    }

    router.forward = function () {
        console.error('router.forward not supported now')
        return
    }

    // core route guard
    router.beforeEach(((
        to: RouteLocationNormalizedGeneric,
        from: RouteLocationNormalizedGeneric,
        next: NavigationGuardNext,
    ) => {
        if (!isInit) {
            // initRouterPaths()
            isInit = true
        }

        if (softNavButtonUsed > 0) {
            softNavButtonUsed = 0
            // use soft nav button
            if (offset === 1) {
                const routeRecord = {
                    ...to,
                    id: idSerial(),
                }
                history.push(routeRecord)
                transitionName = 'slide_left'
                to.version = calcRouterVersion(to)
            } else if (offset < 0) {
                removeLastRouterPath(-offset)
                transitionName = 'slide_right'
                router.pruneCallback?.(from)
            } else if (offset === 0) {
                transitionName = 'slide_replace'
                router.pruneCallback?.(from)
            } else {
                console.warn('unknown offset', offset)
            }
        } else {
            // use system nav button
            debug && console.log('use system nav button', to, history)
            if (
                history[history.length - 2] &&
                to.fullPath === history[history.length - 2]!.fullPath
            ) {
                removeLastRouterPath(1)
                transitionName = 'slide_right'
                router.pruneCallback?.(from)
            } else if (
                history[history.length - 1] &&
                to.fullPath === history[history.length - 1]!.fullPath
            ) {
                transitionName = 'slide_replace'
                router.pruneCallback?.(from)
            } else {
                const routeRecord = {
                    ...to,
                    id: idSerial(),
                }
                history.push(routeRecord)
                transitionName = 'slide_left'
                to.version = calcRouterVersion(to)
            }
        }

        next()
    }) as (
        to: _RouteLocationNormalizedGeneric,
        from: _RouteLocationNormalizedGeneric,
        next: NavigationGuardNext,
    ) => {})

    // provide a interface to <Transition>, clear transitionName after transition
    router.onTransitionEnd = () => {
        transitionName = ''
    }

    const calcRouterVersion = (route: RouteLocationNormalizedGeneric) => {
        if (!isInit) {
            // initRouterPaths()
            isInit = true
        }

        if (history.length === 0) {
            const routeRecord = {
                ...route,
                id: idSerial(),
            }
            history.push(routeRecord)
            transitionName = 'slide_replace'
        }

        let lastHistory = history[history.length - 1]!
        let id: string = ''
        if (lastHistory.path !== route.path && lastHistory.name !== route.name) {
            console.warn(
                'current route name not match!',
                'route:',
                route,
                'history(last):',
                history[history.length - 1],
            )
        }

        id = `${(lastHistory.name as string) || lastHistory.path}$${lastHistory.id}`

        // when page is not keep-alive, the id should be unique when render
        if (!route.meta.keepAlive) {
            let keepAliveVersion = routeNokeepCountMap.get(lastHistory.path!) || 0
            id = `${id}#${keepAliveVersion}`
            routeNokeepCountMap.set(lastHistory.path!, keepAliveVersion + 1)
        }

        debug && console.log('calcRouterVersion return', id, 'history', history)
        return id
    }

    router.getTransitionName = () => {
        return transitionName
    }

    return router
}

export default transitionEnhance

文件：App.vue

<template>
    <van-config-provider :theme="settingStore.setting.theme" style="width: 100%; height: 100%">
        <RouterView v-slot="{ Component, route }">
            {{ injectComponentName(Component, route) }}

            <template v-if="Component">
                <Transition
                    :name="router.getTransitionName()"
                    @leave="router.onTransitionEnd"
                    appear
                >
                    <KeepAlive ref="keepalive" :exclude="data.exclude">
                        <Suspense timeout="100">
                            <template #default>
                                <component
                                    :is="Component"
                                    :key="Component.key || (route as any).version"
                                ></component>
                            </template>

                            <!-- 加载中状态 -->
                            <template #fallback>
                                <div
                                    style="
                                        width: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        padding-top: 36vh;
                                    "
                                >
                                    <div class="loading">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                    精彩内容马上呈现...
                                </div>
                            </template>
                        </Suspense>
                    </KeepAlive>
                </Transition>
            </template>
        </RouterView>
    </van-config-provider>
</template>

<script setup lang="ts">
import {
    showConfirmDialog,
    showFailToast,
    showToast,
    type FloatingBubbleOffset,
    type PopoverAction,
    type PopoverPlacement,
} from 'vant'
import { useRect } from '@vant/use'
import messageHub from './message_hub'
import router from '@/router'
import {
    reactive,
    onMounted,
    useTemplateRef,
    type VNode,
    type RendererNode,
    type RendererElement,
    nextTick,
} from 'vue'
import axiosInstance from './axios'
import useSettingStore from './stores/setting'
import PlayerIcon from './views/app/com.student414.music/_components/PlayerIcon.vue'
import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
// import Live2d from '@/components/Live2d.vue'

const keepalive = useTemplateRef('keepalive')
const data = reactive({
    exclude: [] as string[],
})

const injectComponentName = (
    c: VNode<
        RendererNode,
        RendererElement,
        {
            [key: string]: any
        }
    >,
    r: RouteLocationNormalizedLoadedGeneric,
) => {
    // ensure component is valid, and c is a 'Component'
    if (!c) return
    if (!c.type || typeof c.type !== 'object' || !('__name' in c.type)) {
        return
    }

    // when page navigate from next page to previous, c.key would be earsed unexpectedly,
    // so we must re-fill it using c.type.__name to prevent cache missing.
    // cache missing: prev page's onMounted would be called again, but we just need once.
    if (!c.key) {
        c.key = c.type.__name as string
    }

    // ensure we have received a enhanced route, see 'src/route/router_transition_enhanced.ts'
    if (!('version' in r)) return

    c.key = r.version as string
    c.type.__name = r.version as string
}

onMounted(() => {
    // setup router.pruneCallback
    router.pruneCallback = (from) => {
        if (!from.version) return

        data.exclude.push(from.version)

        // remove heading elements if data.exclude is too large
        if (data.exclude.length > 10) {
            data.exclude.splice(0, data.exclude.length - 10)
        }
    }
})
</script>

<style scoped>

</style>

最后在原来的router.ts中提升一下router功能即可。

const router = transitionEnhance(
    createRouter({
        history: createWebHashHistory(import.meta.env.BASE_URL),
        routes: r,
    }),
)

能用，但很奇葩。
不过实际的UI体验还是非常不错的，类似于Android或IOS原生的App，返回后销毁之前的页面实例，返回后也能把最开始的页面（已缓存的页面）呈现给用户，无额外渲染，资源也释放了。