fix(runtime-core): properly update async component nested in KeepAlive (#11917)

close #11916
This commit is contained in:
edison 2024-09-13 17:17:56 +08:00 committed by GitHub
parent 0e7bc717e6
commit 7fe6c795a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 2 deletions

View File

@ -843,4 +843,37 @@ describe('api: defineAsyncComponent', () => {
await timeout()
expect(serializeInner(root)).toBe('Bar')
})
// 11916
test('with KeepAlive + include', async () => {
const spy = vi.fn()
let resolve: (comp: Component) => void
const Foo = defineAsyncComponent(
() =>
new Promise(r => {
resolve = r as any
}),
)
const root = nodeOps.createElement('div')
const app = createApp({
render: () => h(KeepAlive, { include: 'Foo' }, [h(Foo)]),
})
app.mount(root)
await nextTick()
resolve!({
name: 'Foo',
setup() {
onActivated(spy)
return () => 'Foo'
},
})
await timeout()
expect(serializeInner(root)).toBe('Foo')
expect(spy).toBeCalledTimes(1)
})
})

View File

@ -14,7 +14,6 @@ import { warn } from './warning'
import { ref } from '@vue/reactivity'
import { ErrorCodes, handleError } from './errorHandling'
import { isKeepAlive } from './components/KeepAlive'
import { queueJob } from './scheduler'
import { markAsyncBoundary } from './helpers/useId'
import { type HydrationStrategy, forEachElement } from './hydrationStrategies'
@ -210,7 +209,7 @@ export function defineAsyncComponent<
if (instance.parent && isKeepAlive(instance.parent.vnode)) {
// parent is keep-alive, force update so the loaded component's
// name is taken into account
queueJob(instance.parent.update)
instance.parent.update()
}
})
.catch(err => {