keep alive component expose inner cache & keys

[jiangshengdev]

Vue2 supports simple creation of my own keep alive component

but Vue3 build-in Comonent KeepAlive has Interact with apiLifecycle

This makes it difficult to manage the internal cache manually, for example:

#6219

Expose the internal variables of keep alive, which can solve this problem, but whether it is appropriate still needs to be discussed

https://github.com/vuejs/core/blob/a0e7dc334356e9e6ffaa547d29e55b34b9b8a04d/packages/runtime-core/src/components/KeepAlive.ts

    setup(props, { slots, expose }) {

        expose({
            cache,
            keys,
            pruneCache,
            pruneCacheEntry
        });
    }

PS:
I currently use patch-package to modify the source code in my own project
https://www.npmjs.com/package/patch-package

[jiangshengdev]

Subject: [PATCH] feat: keep alive expose
---
Index: packages/runtime-core/src/components/KeepAlive.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
--- a/packages/runtime-core/src/components/KeepAlive.ts	(revision a0e7dc334356e9e6ffaa547d29e55b34b9b8a04d)
+++ b/packages/runtime-core/src/components/KeepAlive.ts	(date 1676282064399)
@@ -87,7 +87,7 @@
     max: [String, Number]
   },
 
-  setup(props: KeepAliveProps, { slots }: SetupContext) {
+  setup(props: KeepAliveProps, { slots, expose }: SetupContext) {
     const instance = getCurrentInstance()!
     // KeepAlive communicates with the instantiated renderer via the
     // ctx where the renderer passes in its internals,
@@ -243,6 +243,13 @@
       })
     })
 
+    expose({
+      cache,
+      keys,
+      pruneCache,
+      pruneCacheEntry
+    })
+
     return () => {
       pendingCacheKey = null
 

[donkeylmx]

it was not solved for a long time 😢