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

33
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,30 +204,36 @@ 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) {
if (flags & VNodeFlags.COMPONENT_STATEFUL_KEPT_ALIVE) {
// kept-alive // kept-alive
activateComponentInstance(vnode) activateComponentInstance(vnode)
} else { } else {
mountComponentInstance( mountComponentInstance(
vnode, vnode,
tag as ComponentClass, vnode.tag as ComponentClass,
container, container,
parentComponent, parentComponent,
isSVG, isSVG,
endNode endNode
) )
} }
} else { }
// functional component
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 render = tag as FunctionalComponent
const { props, attrs } = resolveProps(data, render.props, render) const { props, attrs } = resolveProps(data, render.props, render)
const subTree = (vnode.children = normalizeComponentRoot( const subTree = (vnode.children = normalizeComponentRoot(
@ -231,7 +245,6 @@ export function createRenderer(options: RendererOptions) {
mount(subTree, container, parentComponent, isSVG, endNode) mount(subTree, container, parentComponent, isSVG, endNode)
vnode.el = subTree.el as RenderNode vnode.el = subTree.el as RenderNode
} }
}
function mountText( function mountText(
vnode: VNode, vnode: VNode,

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 {