fix(hydration): fix update before async component is hydrated (#3563)

fix #3560
This commit is contained in:
HcySunYang
2021-05-08 06:42:58 +08:00
committed by GitHub
parent 43f78151bf
commit c8d96837b8
3 changed files with 112 additions and 40 deletions

View File

@@ -8,7 +8,7 @@ import {
VNodeHook
} from './vnode'
import { flushPostFlushCbs } from './scheduler'
import { ComponentOptions, ComponentInternalInstance } from './component'
import { ComponentInternalInstance } from './component'
import { invokeDirectiveHook } from './directives'
import { warn } from './warning'
import { PatchFlags, ShapeFlags, isReservedProp, isOn } from '@vue/shared'
@@ -178,24 +178,15 @@ export function createHydrationFunctions(
// on its sub-tree.
vnode.slotScopeIds = slotScopeIds
const container = parentNode(node)!
const hydrateComponent = () => {
mountComponent(
vnode,
container,
null,
parentComponent,
parentSuspense,
isSVGContainer(container),
optimized
)
}
// async component
const loadAsync = (vnode.type as ComponentOptions).__asyncLoader
if (loadAsync) {
loadAsync().then(hydrateComponent)
} else {
hydrateComponent()
}
mountComponent(
vnode,
container,
null,
parentComponent,
parentSuspense,
isSVGContainer(container),
optimized
)
// component may be async, so in the case of fragments we cannot rely
// on component's rendered output to determine the end of the fragment
// instead, we do a lookahead to find the end anchor node.