diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts index f897f40375f..07ac2ed2d78 100644 --- a/packages/runtime-core/src/components/KeepAlive.ts +++ b/packages/runtime-core/src/components/KeepAlive.ts @@ -267,6 +267,7 @@ const KeepAliveImpl: ComponentOptions = { pendingCacheKey = null if (!slots.default) { + current = null return null } diff --git a/packages/runtime-dom/__tests__/createApp.spec.ts b/packages/runtime-dom/__tests__/createApp.spec.ts index 9a8d05df2df..0c6479e7ba2 100644 --- a/packages/runtime-dom/__tests__/createApp.spec.ts +++ b/packages/runtime-dom/__tests__/createApp.spec.ts @@ -1,4 +1,13 @@ -import { createApp, h } from '../src' +import { + KeepAlive, + Transition, + createApp, + h, + nextTick, + onDeactivated, + onUnmounted, + ref, +} from '../src' describe('createApp for dom', () => { // #2926 @@ -39,4 +48,55 @@ describe('createApp for dom', () => { // ensure no mutation happened to Root object expect(originalObj).toMatchObject(Root) }) + + test('Transition + KeepAlive', async () => { + const deactivated = vi.fn() + const unmounted = vi.fn() + const CompA = { + name: 'CompA', + setup() { + return () => h('h1', 'CompA') + }, + } + const CompB = { + name: 'CompB', + setup() { + onDeactivated(deactivated) + onUnmounted(unmounted) + return () => h('h1', 'CompB') + }, + } + + const current = ref('CompA') + const cacheList = ref(['CompA', 'CompB']) + const App = createApp({ + setup() { + return () => + h( + Transition, + { mode: 'out-in' }, + { + default: () => [ + h( + KeepAlive, + { + include: cacheList.value, + }, + [current.value === 'CompA' ? h(CompA) : h(CompB)], + ), + ], + }, + ) + }, + }) + App.mount(document.createElement('div')) + current.value = 'CompB' + await new Promise(resolve => setTimeout(resolve, 500)) + await nextTick() + cacheList.value.splice(1) + current.value = 'CompA' + await nextTick() + expect(deactivated).toHaveBeenCalledTimes(1) + expect(unmounted).toHaveBeenCalledTimes(1) + }) })