Skip to content

Commit e322126

Browse files
committed
fix(keep-alive): invoke initial activated hook for async components's child component (#7276)
1 parent 002d442 commit e322126

File tree

2 files changed

+45
-1
lines changed

2 files changed

+45
-1
lines changed

packages/runtime-core/__tests__/components/KeepAlive.spec.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -883,6 +883,42 @@ describe('KeepAlive', () => {
883883
expect(serializeInner(root)).toBe('<p>1</p>')
884884
})
885885

886+
// #7276
887+
test('should invoke onActivated of child on initial mount', async () => {
888+
let parentCount = 0
889+
let childCount = 0
890+
const Child = defineComponent({
891+
name: 'Child',
892+
setup() {
893+
onActivated(() => {
894+
childCount++
895+
})
896+
return () => 'child'
897+
}
898+
})
899+
const Parent = defineComponent({
900+
setup() {
901+
onActivated(() => {
902+
parentCount++
903+
})
904+
return () => h(Child)
905+
}
906+
})
907+
const AsyncComp = defineAsyncComponent(() => Promise.resolve(Parent))
908+
909+
const App = {
910+
render: () => {
911+
return h(KeepAlive, null, () => h(AsyncComp))
912+
}
913+
}
914+
915+
render(h(App), root)
916+
await timeout()
917+
expect(serializeInner(root)).toBe('child')
918+
expect(parentCount).toBe(1)
919+
expect(childCount).toBe(1)
920+
})
921+
886922
// #4976
887923
test('handle error in async onActivated', async () => {
888924
const err = new Error('foo')

packages/runtime-core/src/components/KeepAlive.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -402,10 +402,18 @@ function registerKeepAliveHook(
402402
// arrays.
403403
if (target) {
404404
let current = target.parent
405+
let child = target
405406
while (current && current.parent) {
406407
if (isKeepAlive(current.parent.vnode)) {
407-
injectToKeepAliveRoot(wrappedHook, type, target, current)
408+
injectToKeepAliveRoot(
409+
wrappedHook,
410+
type,
411+
target,
412+
// #7276
413+
isAsyncWrapper(current) ? child : current
414+
)
408415
}
416+
child = current
409417
current = current.parent
410418
}
411419
}

0 commit comments

Comments
 (0)