root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(suspense): fix more suspense patch before resolve edge cases 

close #10017
This commit is contained in:
Evan You 2024-01-10 21:03:20 +08:00
parent 972facee0d
commit 70ad4caad7
3 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/runtime-core/__tests__/components/Suspense.spec.ts
View File

@ -1692,7 +1692,7 @@ describe('Suspense', () => {
expect(serializeInner(root)).toBe(`<div>sync</div>`) expect(serializeInner(root)).toBe(`<div>sync</div>`)
}) })
// #6416 follow up // #6416 follow up / #10017
test('Suspense patched during HOC async component re-mount', async () => { test('Suspense patched during HOC async component re-mount', async () => {
const key = ref('k') const key = ref('k')
const data = ref('data') const data = ref('data')
@ -1713,7 +1713,7 @@ describe('Suspense', () => {
const App = { const App = {
render() { render() {
return h(Suspense, null, { return h(Suspense, null, {
default: h(Comp, { data: data.value }), default: h(Comp, { k: key.value, data: data.value }),
}) })
}, },
} }

1
packages/runtime-core/src/componentRenderUtils.ts
View File

@ -428,7 +428,6 @@ export function updateHOCHostEl(
{ vnode, parent }: ComponentInternalInstance, { vnode, parent }: ComponentInternalInstance,
el: typeof vnode.el, // HostNode el: typeof vnode.el, // HostNode
) { ) {
if (!el) return
while (parent) { while (parent) {
const root = parent.subTree const root = parent.subTree
if (root.suspense && root.suspense.activeBranch === vnode) { if (root.suspense && root.suspense.activeBranch === vnode) {

9
packages/runtime-core/src/components/Suspense.ts
View File

@ -864,7 +864,14 @@ export function queueEffectWithSuspense(
function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) { function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
suspense.activeBranch = branch suspense.activeBranch = branch
const { vnode, parentComponent } = suspense const { vnode, parentComponent } = suspense
const el = (vnode.el = branch.el) let el = branch.el
// if branch has no el after patch, it's a HOC wrapping async components
// drill and locate the placeholder comment node
while (!el && branch.component) {
branch = branch.component.subTree
el = branch.el
}
vnode.el = el
// in case suspense is the root node of a component, // in case suspense is the root node of a component,
// recursively update the HOC el // recursively update the HOC el
if (parentComponent && parentComponent.subTree === vnode) { if (parentComponent && parentComponent.subTree === vnode) {