diff --git a/packages-private/vapor-e2e-test/__tests__/transition.spec.ts b/packages-private/vapor-e2e-test/__tests__/transition.spec.ts
index 0bfc30598cc..0babdd8b8dc 100644
--- a/packages-private/vapor-e2e-test/__tests__/transition.spec.ts
+++ b/packages-private/vapor-e2e-test/__tests__/transition.spec.ts
@@ -903,7 +903,25 @@ describe('vapor transition', () => {
)
})
- describe.todo('transition with KeepAlive', () => {})
+ describe('transition with KeepAlive', () => {
+ test('unmount innerChild (out-in mode)', async () => {
+ const btnSelector = '.keep-alive > button'
+ const containerSelector = '.keep-alive > div'
+
+ await transitionFinish()
+ expect(await html(containerSelector)).toBe('
0
')
+
+ await click(btnSelector)
+
+ await transitionFinish()
+ expect(await html(containerSelector)).toBe('')
+ const calls = await page().evaluate(() => {
+ return (window as any).getCalls('unmount')
+ })
+ expect(calls).toStrictEqual(['TrueBranch'])
+ })
+ })
+
describe.todo('transition with Suspense', () => {})
describe.todo('transition with Teleport', () => {})
diff --git a/packages-private/vapor-e2e-test/transition/App.vue b/packages-private/vapor-e2e-test/transition/App.vue
index 4855098243b..e437e07456d 100644
--- a/packages-private/vapor-e2e-test/transition/App.vue
+++ b/packages-private/vapor-e2e-test/transition/App.vue
@@ -7,6 +7,7 @@ import {
VaporTransition,
createIf,
template,
+ onUnmounted,
} from 'vue'
const show = ref(true)
const toggle = ref(true)
@@ -28,6 +29,8 @@ let calls = {
showLeaveCancel: [],
showAppear: [],
notEnter: [],
+
+ unmount: [],
}
window.getCalls = key => calls[key]
window.resetCalls = key => (calls[key] = [])
@@ -90,6 +93,25 @@ const viewInOut = shallowRef(SimpleOne)
function changeViewInOut() {
viewInOut.value = viewInOut.value === SimpleOne ? Two : SimpleOne
}
+
+const TrueBranch = defineVaporComponent({
+ name: 'TrueBranch',
+ setup() {
+ onUnmounted(() => {
+ calls.unmount.push('TrueBranch')
+ })
+ return template('0
')()
+ },
+})
+const includeRef = ref(['TrueBranch'])
+const click = () => {
+ toggle.value = !toggle.value
+ if (toggle.value) {
+ includeRef.value = ['TrueBranch']
+ } else {
+ includeRef.value = []
+ }
+}
@@ -481,6 +503,19 @@ function changeViewInOut() {
+
+
+
+
diff --git a/packages/runtime-vapor/src/components/KeepAlive.ts b/packages/runtime-vapor/src/components/KeepAlive.ts
index 3367ea089bd..c6ff01000d8 100644
--- a/packages/runtime-vapor/src/components/KeepAlive.ts
+++ b/packages/runtime-vapor/src/components/KeepAlive.ts
@@ -150,6 +150,7 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
}
keepAliveInstance.deactivate = instance => {
+ current = undefined
deactivate(instance, storageContainer)
}