theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(hydration): move fragment to seaprate function + skip normalization in optimized mode

Browse Source
This commit is contained in:
Evan You 2020-02-27 11:26:39 -05:00
parent 3357ff438c
commit 4809325c07
1 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/runtime-core/src/hydration.ts
View File

@ -39,7 +39,8 @@ export function createHydrationFunctions({
const hydrateNode = ( const hydrateNode = (
node: Node, node: Node,
vnode: VNode, vnode: VNode,
parentComponent: ComponentInternalInstance | null = null parentComponent: ComponentInternalInstance | null = null,
optimized = false
): Node | null => { ): Node | null => {
const { type, shapeFlag } = vnode const { type, shapeFlag } = vnode
vnode.el = node vnode.el = node
@ -49,18 +50,15 @@ export function createHydrationFunctions({
case Static: case Static:
return node.nextSibling return node.nextSibling
case Fragment: case Fragment:
const parent = node.parentNode! return hydrateFragment(node, vnode, parentComponent, optimized)
parent.insertBefore((vnode.el = createText('')), node)
const next = hydrateChildren(
node,
vnode.children as VNode[],
parentComponent
)
parent.insertBefore((vnode.anchor = createText('')), next)
return next
default: default:
if (shapeFlag & ShapeFlags.ELEMENT) { if (shapeFlag & ShapeFlags.ELEMENT) {
return hydrateElement(node as Element, vnode, parentComponent) return hydrateElement(
node as Element,
vnode,
parentComponent,
optimized
)
} else if (shapeFlag & ShapeFlags.COMPONENT) { } else if (shapeFlag & ShapeFlags.COMPONENT) {
// when setting up the render effect, if the initial vnode already // when setting up the render effect, if the initial vnode already
// has .el set, the component will perform hydration instead of mount // has .el set, the component will perform hydration instead of mount
@ -69,7 +67,7 @@ export function createHydrationFunctions({
const subTree = vnode.component!.subTree const subTree = vnode.component!.subTree
return (subTree.anchor || subTree.el).nextSibling return (subTree.anchor || subTree.el).nextSibling
} else if (shapeFlag & ShapeFlags.PORTAL) { } else if (shapeFlag & ShapeFlags.PORTAL) {
hydratePortal(vnode, parentComponent) hydratePortal(vnode, parentComponent, optimized)
return node.nextSibling return node.nextSibling
} else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) { } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
// TODO Suspense // TODO Suspense
@ -83,7 +81,8 @@ export function createHydrationFunctions({
const hydrateElement = ( const hydrateElement = (
el: Element, el: Element,
vnode: VNode, vnode: VNode,
parentComponent: ComponentInternalInstance | null parentComponent: ComponentInternalInstance | null,
optimized: boolean
) => { ) => {
const { props, patchFlag } = vnode const { props, patchFlag } = vnode
// skip props & children if this is hoisted static nodes // skip props & children if this is hoisted static nodes
@ -123,8 +122,9 @@ export function createHydrationFunctions({
) { ) {
hydrateChildren( hydrateChildren(
el.firstChild, el.firstChild,
vnode.children as VNode[], vnode,
parentComponent parentComponent,
optimized || vnode.dynamicChildren !== null
) )
} }
} }
@ -133,32 +133,45 @@ export function createHydrationFunctions({
const hydrateChildren = ( const hydrateChildren = (
node: Node | null, node: Node | null,
vnodes: VNode[], vnode: VNode,
parentComponent: ComponentInternalInstance | null parentComponent: ComponentInternalInstance | null,
optimized: boolean
): Node | null => { ): Node | null => {
for (let i = 0; node != null && i < vnodes.length; i++) { const children = vnode.children as VNode[]
// TODO can skip normalizeVNode in optimized mode optimized = optimized || vnode.dynamicChildren !== null
// (need hint on rendered markup?) for (let i = 0; node != null && i < children.length; i++) {
const vnode = (vnodes[i] = normalizeVNode(vnodes[i])) const vnode = optimized
node = hydrateNode(node, vnode, parentComponent) ? children[i]
: (children[i] = normalizeVNode(children[i]))
node = hydrateNode(node, vnode, parentComponent, optimized)
} }
return node return node
} }
const hydrateFragment = (
node: Node,
vnode: VNode,
parentComponent: ComponentInternalInstance | null,
optimized: boolean
) => {
const parent = node.parentNode!
parent.insertBefore((vnode.el = createText('')), node)
const next = hydrateChildren(node, vnode, parentComponent, optimized)
parent.insertBefore((vnode.anchor = createText('')), next)
return next
}
const hydratePortal = ( const hydratePortal = (
vnode: VNode, vnode: VNode,
parentComponent: ComponentInternalInstance | null parentComponent: ComponentInternalInstance | null,
optimized: boolean
) => { ) => {
const targetSelector = vnode.props && vnode.props.target const targetSelector = vnode.props && vnode.props.target
const target = (vnode.target = isString(targetSelector) const target = (vnode.target = isString(targetSelector)
? document.querySelector(targetSelector) ? document.querySelector(targetSelector)
: targetSelector) : targetSelector)
if (target != null && vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) { if (target != null && vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
hydrateChildren( hydrateChildren(target.firstChild, vnode, parentComponent, optimized)
target.firstChild,
vnode.children as VNode[],
parentComponent
)
} }
} }