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

refactor: mountComponent

Browse Source
This commit is contained in:
Evan You 2018-10-02 15:53:22 -04:00
parent dcc3e98937
commit 9ce86f86f4
2 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/core/src/createRenderer.ts
View File

@ -118,8 +118,16 @@ export function createRenderer(options: RendererOptions) {
const { flags } = vnode const { flags } = vnode
if (flags & VNodeFlags.ELEMENT) { if (flags & VNodeFlags.ELEMENT) {
mountElement(vnode, container, parentComponent, isSVG, endNode) mountElement(vnode, container, parentComponent, isSVG, endNode)
} else if (flags & VNodeFlags.COMPONENT) { } else if (flags & VNodeFlags.COMPONENT_STATEFUL) {
mountComponent(vnode, container, parentComponent, isSVG, endNode) mountStatefulComponent(vnode, container, parentComponent, isSVG, endNode)
} else if (flags & VNodeFlags.COMPONENT_FUNCTIONAL) {
mountFunctionalComponent(
vnode,
container,
parentComponent,
isSVG,
endNode
)
} else if (flags & VNodeFlags.TEXT) { } else if (flags & VNodeFlags.TEXT) {
mountText(vnode, container, endNode) mountText(vnode, container, endNode)
} else if (flags & VNodeFlags.FRAGMENT) { } else if (flags & VNodeFlags.FRAGMENT) {
@ -196,43 +204,48 @@ export function createRenderer(options: RendererOptions) {
}) })
} }
function mountComponent( function mountStatefulComponent(
vnode: VNode, vnode: VNode,
container: RenderNode | null, container: RenderNode | null,
parentComponent: MountedComponent | null, parentComponent: MountedComponent | null,
isSVG: boolean, isSVG: boolean,
endNode: RenderNode | null endNode: RenderNode | null
) { ) {
const { flags, tag, data, slots } = vnode if (vnode.flags & VNodeFlags.COMPONENT_STATEFUL_KEPT_ALIVE) {
if (flags & VNodeFlags.COMPONENT_STATEFUL) { // kept-alive
if (flags & VNodeFlags.COMPONENT_STATEFUL_KEPT_ALIVE) { activateComponentInstance(vnode)
// kept-alive
activateComponentInstance(vnode)
} else {
mountComponentInstance(
vnode,
tag as ComponentClass,
container,
parentComponent,
isSVG,
endNode
)
}
} else { } else {
// functional component mountComponentInstance(
const render = tag as FunctionalComponent
const { props, attrs } = resolveProps(data, render.props, render)
const subTree = (vnode.children = normalizeComponentRoot(
render(props, slots || EMPTY_OBJ, attrs || EMPTY_OBJ),
vnode, vnode,
attrs, vnode.tag as ComponentClass,
render.inheritAttrs container,
)) parentComponent,
mount(subTree, container, parentComponent, isSVG, endNode) isSVG,
vnode.el = subTree.el as RenderNode endNode
)
} }
} }
function mountFunctionalComponent(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null,
isSVG: boolean,
endNode: RenderNode | null
) {
const { tag, data, slots } = vnode
const render = tag as FunctionalComponent
const { props, attrs } = resolveProps(data, render.props, render)
const subTree = (vnode.children = normalizeComponentRoot(
render(props, slots || EMPTY_OBJ, attrs || EMPTY_OBJ),
vnode,
attrs,
render.inheritAttrs
))
mount(subTree, container, parentComponent, isSVG, endNode)
vnode.el = subTree.el as RenderNode
}
function mountText( function mountText(
vnode: VNode, vnode: VNode,
container: RenderNode | null, container: RenderNode | null,

17
packages/core/src/flags.ts
View File

@ -3,22 +3,21 @@ export const enum VNodeFlags {
ELEMENT_HTML = 1, ELEMENT_HTML = 1,
ELEMENT_SVG = 1 << 1, ELEMENT_SVG = 1 << 1,
COMPONENT_UNKNOWN = 1 << 2, COMPONENT_STATEFUL_NORMAL = 1 << 2,
COMPONENT_STATEFUL_NORMAL = 1 << 3, COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE = 1 << 3,
COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE = 1 << 4, COMPONENT_STATEFUL_KEPT_ALIVE = 1 << 4,
COMPONENT_STATEFUL_KEPT_ALIVE = 1 << 5, COMPONENT_FUNCTIONAL = 1 << 5,
COMPONENT_FUNCTIONAL = 1 << 6,
TEXT = 1 << 7, TEXT = 1 << 6,
FRAGMENT = 1 << 8, FRAGMENT = 1 << 7,
PORTAL = 1 << 9, PORTAL = 1 << 8,
// masks (only use for bitwise checks, do not use equal checks or assign) // masks (only use for bitwise checks, do not use equal checks or assign)
ELEMENT = ELEMENT_HTML | ELEMENT_SVG, ELEMENT = ELEMENT_HTML | ELEMENT_SVG,
COMPONENT_STATEFUL = COMPONENT_STATEFUL_NORMAL | COMPONENT_STATEFUL = COMPONENT_STATEFUL_NORMAL |
COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE | COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE |
COMPONENT_STATEFUL_KEPT_ALIVE, COMPONENT_STATEFUL_KEPT_ALIVE,
COMPONENT = COMPONENT_UNKNOWN | COMPONENT_STATEFUL | COMPONENT_FUNCTIONAL COMPONENT = COMPONENT_STATEFUL | COMPONENT_FUNCTIONAL
} }
export const enum ChildrenFlags { export const enum ChildrenFlags {