fix(Transition): re-fix vuejs#10620

edison1105 · Apr 29, 2024 · 43be5c6 · 43be5c6
1 parent 47453f1
commit 43be5c6
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 39 deletions.
diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -7,7 +7,6 @@ import {
   h,
   nextTick,
   nodeOps,
-  onUnmounted,
   ref,
   render,
   serialize,
@@ -769,42 +768,6 @@ describe('BaseTransition', () => {
     test('w/ KeepAlive', async () => {
       await runTestWithKeepAlive(testOutIn)
     })
-
-    test('w/ KeepAlive + unmount innerChild', async () => {
-      const unmountSpy = vi.fn()
-      const includeRef = ref(['TrueBranch'])
-      const trueComp = {
-        name: 'TrueBranch',
-        setup() {
-          onUnmounted(unmountSpy)
-          const count = ref(0)
-          return () => h('div', count.value)
-        },
-      }
-
-      const toggle = ref(true)
-      const { props } = mockProps({ mode: 'out-in' }, true /*withKeepAlive*/)
-      const root = nodeOps.createElement('div')
-      const App = {
-        render() {
-          return h(BaseTransition, props, () => {
-            return h(
-              KeepAlive,
-              { include: includeRef.value },
-              toggle.value ? h(trueComp) : h('div'),
-            )
-          })
-        },
-      }
-      render(h(App), root)
-
-      // trigger toggle
-      toggle.value = false
-      includeRef.value = []
-
-      await nextTick()
-      expect(unmountSpy).toHaveBeenCalledTimes(1)
-    })
   })
 
   // #6835

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
@@ -224,7 +224,7 @@ const BaseTransitionImpl: ComponentOptions = {
         // update old tree's hooks in case of dynamic transition
         setTransitionHooks(oldInnerChild, leavingHooks)
         // switching between different views
-        if (mode === 'out-in') {
+        if (mode === 'out-in' && innerChild.type !== Comment) {
           state.isLeaving = true
           // return placeholder node and queue update when leave finishes
           leavingHooks.afterLeave = () => {

diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
@@ -254,7 +254,7 @@ const KeepAliveImpl: ComponentOptions = {
       pendingCacheKey = null
 
       if (!slots.default) {
-        return (current = null)
+        return null
       }
 
       const children = slots.default()

diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1,6 +1,7 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import path from 'node:path'
 import { Transition, createApp, h, nextTick, ref } from 'vue'
+import { expect } from 'vitest'
 
 describe('e2e: Transition', () => {
   const { page, html, classList, isVisible, timeout, nextFrame, click } =
@@ -1214,6 +1215,63 @@ describe('e2e: Transition', () => {
       },
       E2E_TIMEOUT,
     )
+
+    test(
+      'w/ KeepAlive + unmount innerChild',
+      async () => {
+        const unmountSpy = vi.fn()
+        await page().exposeFunction('unmountSpy', unmountSpy)
+        await page().evaluate(() => {
+          const { unmountSpy } = window as any
+          const { createApp, ref, h, onUnmounted } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition mode="out-in">
+                <KeepAlive :include="includeRef">
+                  <TrueBranch v-if="toggle"></TrueBranch>
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              TrueBranch: {
+                name: 'TrueBranch',
+                setup() {
+                  onUnmounted(unmountSpy)
+                  const count = ref(0)
+                  return () => h('div', count.value)
+                },
+              },
+            },
+            setup: () => {
+              const includeRef = ref(['TrueBranch'])
+              const toggle = ref(true)
+              const click = () => {
+                toggle.value = !toggle.value
+                if (toggle.value) {
+                  includeRef.value = ['TrueBranch']
+                } else {
+                  includeRef.value = []
+                }
+              }
+              return { toggle, click, unmountSpy, includeRef }
+            },
+          }).mount('#app')
+        })
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div>0</div>')
+
+        await click('#toggleBtn')
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+        expect(unmountSpy).toBeCalledTimes(1)
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with Suspense', () => {