fix(runtime-core): fix stale v-memo after v-if toggle (#6606)

close #6593

diff --git a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
index f4f356dea4fa5a382d1c18f795d8afd6b1bcd7bc..32f89b1d8e9d6ace85387caf8a04e1353bfd14ef 100644 (file)
--- a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
@@ -148,6 +148,17 @@ describe('v-memo', () => {
     // should update
     await nextTick()
     expect(el.innerHTML).toBe(`<div>3 3</div>`)
+
+    vm.ok = true
+    await nextTick()
+    vm.ok = false
+    await nextTick()
+    expect(el.innerHTML).toBe(`<div>3 3</div>`)
+
+    vm.y++
+    // should update
+    await nextTick()
+    expect(el.innerHTML).toBe(`<div>4 3</div>`)
   })
 
   test('on v-for', async () => {

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index f2ca046414247558d2fc263331a035b2c7104208..70a3716a3e39d9b03b2fa3603ec818484e9bd059 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -322,7 +322,7 @@ export interface ComponentInternalInstance {
    * after initialized (e.g. inline handlers)
    * @internal
    */
-  renderCache: (Function | VNode)[]
+  renderCache: (Function | VNode | undefined)[]
 
   /**
    * Resolved component registry, only for components with mixins or extends

diff --git a/packages/runtime-core/src/helpers/withMemo.ts b/packages/runtime-core/src/helpers/withMemo.ts
index 97fbad31fb99e49982cc223a1a0e8d98c0ecd6f5..72ef814eefa9cca6382123edb8cc5d844271cefb 100644 (file)
--- a/packages/runtime-core/src/helpers/withMemo.ts
+++ b/packages/runtime-core/src/helpers/withMemo.ts
@@ -15,6 +15,8 @@ export function withMemo(
 
   // shallow clone
   ret.memo = memo.slice()
+  ret.memoIndex = index
+
   return (cache[index] = ret)
 }
 

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index d06c6858415ff8c62ddbe2918a58e1a06315312f..2a35a5e192538a4f4c0c6247a4ff41df4126869c 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -2110,12 +2110,18 @@ function baseCreateRenderer(
       shapeFlag,
       patchFlag,
       dirs,
+      memoIndex,
     } = vnode
     // unset ref
     if (ref != null) {
       setRef(ref, null, parentSuspense, vnode, true)
     }
 
+    // #6593 should clean memo cache when unmount
+    if (memoIndex != null) {
+      parentComponent!.renderCache[memoIndex] = undefined
+    }
+
     if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
       ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
       return

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 617bdf7ad58ad0b915a16292f553311d71a8e836..7abd45c7fa5004f70511abc6d72a6e7afc7bd1f0 100644 (file)
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -228,6 +228,10 @@ export interface VNode<
    * @internal attached by v-memo
    */
   memo?: any[]
+  /**
+   * @internal index for cleaning v-memo cache
+   */
+  memoIndex?: number
   /**
    * @internal __COMPAT__ only
    */