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

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

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