• createElement
    • children 的规范化
    • VNode 的创建
    • 总结

    createElement

    Vue.js 利用 createElement 方法创建 VNode,它定义在 src/core/vdom/create-elemenet.js 中:

    1. // wrapper function for providing a more flexible interface
    2. // without getting yelled at by flow
    3. export function createElement (
    4. context: Component,
    5. tag: any,
    6. data: any,
    7. children: any,
    8. normalizationType: any,
    9. alwaysNormalize: boolean
    10. ): VNode | Array<VNode> {
    11. if (Array.isArray(data) || isPrimitive(data)) {
    12. normalizationType = children
    13. children = data
    14. data = undefined
    15. }
    16. if (isTrue(alwaysNormalize)) {
    17. normalizationType = ALWAYS_NORMALIZE
    18. }
    19. return _createElement(context, tag, data, children, normalizationType)
    20. }

    createElement 方法实际上是对 _createElement 方法的封装,它允许传入的参数更加灵活,在处理这些参数后,调用真正创建 VNode 的函数 _createElement

    1. export function _createElement (
    2. context: Component,
    3. tag?: string | Class<Component> | Function | Object,
    4. data?: VNodeData,
    5. children?: any,
    6. normalizationType?: number
    7. ): VNode | Array<VNode> {
    8. if (isDef(data) && isDef((data: any).__ob__)) {
    9. process.env.NODE_ENV !== 'production' && warn(
    10. `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
    11. 'Always create fresh vnode data objects in each render!',
    12. context
    13. )
    14. return createEmptyVNode()
    15. }
    16. // object syntax in v-bind
    17. if (isDef(data) && isDef(data.is)) {
    18. tag = data.is
    19. }
    20. if (!tag) {
    21. // in case of component :is set to falsy value
    22. return createEmptyVNode()
    23. }
    24. // warn against non-primitive key
    25. if (process.env.NODE_ENV !== 'production' &&
    26. isDef(data) && isDef(data.key) && !isPrimitive(data.key)
    27. ) {
    28. if (!__WEEX__ || !('@binding' in data.key)) {
    29. warn(
    30. 'Avoid using non-primitive value as key, ' +
    31. 'use string/number value instead.',
    32. context
    33. )
    34. }
    35. }
    36. // support single function children as default scoped slot
    37. if (Array.isArray(children) &&
    38. typeof children[0] === 'function'
    39. ) {
    40. data = data || {}
    41. data.scopedSlots = { default: children[0] }
    42. children.length = 0
    43. }
    44. if (normalizationType === ALWAYS_NORMALIZE) {
    45. children = normalizeChildren(children)
    46. } else if (normalizationType === SIMPLE_NORMALIZE) {
    47. children = simpleNormalizeChildren(children)
    48. }
    49. let vnode, ns
    50. if (typeof tag === 'string') {
    51. let Ctor
    52. ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    53. if (config.isReservedTag(tag)) {
    54. // platform built-in elements
    55. vnode = new VNode(
    56. config.parsePlatformTagName(tag), data, children,
    57. undefined, undefined, context
    58. )
    59. } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
    60. // component
    61. vnode = createComponent(Ctor, data, context, children, tag)
    62. } else {
    63. // unknown or unlisted namespaced elements
    64. // check at runtime because it may get assigned a namespace when its
    65. // parent normalizes children
    66. vnode = new VNode(
    67. tag, data, children,
    68. undefined, undefined, context
    69. )
    70. }
    71. } else {
    72. // direct component options / constructor
    73. vnode = createComponent(tag, data, context, children)
    74. }
    75. if (Array.isArray(vnode)) {
    76. return vnode
    77. } else if (isDef(vnode)) {
    78. if (isDef(ns)) applyNS(vnode, ns)
    79. if (isDef(data)) registerDeepBindings(data)
    80. return vnode
    81. } else {
    82. return createEmptyVNode()
    83. }
    84. }

    _createElement 方法有 5 个参数,context 表示 VNode 的上下文环境,它是 Component 类型;tag 表示标签,它可以是一个字符串,也可以是一个 Componentdata 表示 VNode 的数据,它是一个 VNodeData 类型,可以在 flow/vnode.js 中找到它的定义,这里先不展开说;children 表示当前 VNode 的子节点,它是任意类型的,它接下来需要被规范为标准的 VNode 数组;normalizationType 表示子节点规范的类型,类型不同规范的方法也就不一样,它主要是参考 render 函数是编译生成的还是用户手写的。

    createElement 函数的流程略微有点多,我们接下来主要分析 2 个重点的流程 —— children 的规范化以及 VNode 的创建。

    children 的规范化

    由于 Virtual DOM 实际上是一个树状结构,每一个 VNode 可能会有若干个子节点,这些子节点应该也是 VNode 的类型。_createElement 接收的第 4 个参数 children 是任意类型的,因此我们需要把它们规范成 VNode 类型。

    这里根据 normalizationType 的不同,调用了 normalizeChildren(children)simpleNormalizeChildren(children) 方法,它们的定义都在 src/core/vdom/helpers/normalzie-children.js 中:

    1. // The template compiler attempts to minimize the need for normalization by
    2. // statically analyzing the template at compile time.
    3. //
    4. // For plain HTML markup, normalization can be completely skipped because the
    5. // generated render function is guaranteed to return Array<VNode>. There are
    6. // two cases where extra normalization is needed:
    7. // 1. When the children contains components - because a functional component
    8. // may return an Array instead of a single root. In this case, just a simple
    9. // normalization is needed - if any child is an Array, we flatten the whole
    10. // thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
    11. // because functional components already normalize their own children.
    12. export function simpleNormalizeChildren (children: any) {
    13. for (let i = 0; i < children.length; i++) {
    14. if (Array.isArray(children[i])) {
    15. return Array.prototype.concat.apply([], children)
    16. }
    17. }
    18. return children
    19. }
    20. // 2. When the children contains constructs that always generated nested Arrays,
    21. // e.g. <template>, <slot>, v-for, or when the children is provided by user
    22. // with hand-written render functions / JSX. In such cases a full normalization
    23. // is needed to cater to all possible types of children values.
    24. export function normalizeChildren (children: any): ?Array<VNode> {
    25. return isPrimitive(children)
    26. ? [createTextVNode(children)]
    27. : Array.isArray(children)
    28. ? normalizeArrayChildren(children)
    29. : undefined
    30. }

    simpleNormalizeChildren 方法调用场景是 render 函数当函数是编译生成的。理论上编译生成的 children 都已经是 VNode 类型的,但这里有一个例外,就是 functional component 函数式组件返回的是一个数组而不是一个根节点,所以会通过 Array.prototype.concat 方法把整个 children 数组打平,让它的深度只有一层。

    normalizeChildren 方法的调用场景有 2 种,一个场景是 render 函数是用户手写的,当 children 只有一个节点的时候,Vue.js 从接口层面允许用户把 children 写成基础类型用来创建单个简单的文本节点,这种情况会调用 createTextVNode 创建一个文本节点的 VNode;另一个场景是当编译 slotv-for 的时候会产生嵌套数组的情况,会调用 normalizeArrayChildren 方法,接下来看一下它的实现:

    1. function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
    2. const res = []
    3. let i, c, lastIndex, last
    4. for (i = 0; i < children.length; i++) {
    5. c = children[i]
    6. if (isUndef(c) || typeof c === 'boolean') continue
    7. lastIndex = res.length - 1
    8. last = res[lastIndex]
    9. // nested
    10. if (Array.isArray(c)) {
    11. if (c.length > 0) {
    12. c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
    13. // merge adjacent text nodes
    14. if (isTextNode(c[0]) && isTextNode(last)) {
    15. res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
    16. c.shift()
    17. }
    18. res.push.apply(res, c)
    19. }
    20. } else if (isPrimitive(c)) {
    21. if (isTextNode(last)) {
    22. // merge adjacent text nodes
    23. // this is necessary for SSR hydration because text nodes are
    24. // essentially merged when rendered to HTML strings
    25. res[lastIndex] = createTextVNode(last.text + c)
    26. } else if (c !== '') {
    27. // convert primitive to vnode
    28. res.push(createTextVNode(c))
    29. }
    30. } else {
    31. if (isTextNode(c) && isTextNode(last)) {
    32. // merge adjacent text nodes
    33. res[lastIndex] = createTextVNode(last.text + c.text)
    34. } else {
    35. // default key for nested array children (likely generated by v-for)
    36. if (isTrue(children._isVList) &&
    37. isDef(c.tag) &&
    38. isUndef(c.key) &&
    39. isDef(nestedIndex)) {
    40. c.key = `__vlist${nestedIndex}_${i}__`
    41. }
    42. res.push(c)
    43. }
    44. }
    45. }
    46. return res
    47. }

    normalizeArrayChildren 接收 2 个参数,children 表示要规范的子节点,nestedIndex 表示嵌套的索引,因为单个 child 可能是一个数组类型。 normalizeArrayChildren 主要的逻辑就是遍历 children,获得单个节点 c,然后对 c 的类型判断,如果是一个数组类型,则递归调用 normalizeArrayChildren; 如果是基础类型,则通过 createTextVNode 方法转换成 VNode 类型;否则就已经是 VNode 类型了,如果 children 是一个列表并且列表还存在嵌套的情况,则根据 nestedIndex 去更新它的 key。这里需要注意一点,在遍历的过程中,对这 3 种情况都做了如下处理:如果存在两个连续的 text 节点,会把它们合并成一个 text 节点。

    经过对 children 的规范化,children 变成了一个类型为 VNode 的 Array。

    VNode 的创建

    回到 createElement 函数,规范化 children 后,接下来会去创建一个 VNode 的实例:

    1. let vnode, ns
    2. if (typeof tag === 'string') {
    3. let Ctor
    4. ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    5. if (config.isReservedTag(tag)) {
    6. // platform built-in elements
    7. vnode = new VNode(
    8. config.parsePlatformTagName(tag), data, children,
    9. undefined, undefined, context
    10. )
    11. } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
    12. // component
    13. vnode = createComponent(Ctor, data, context, children, tag)
    14. } else {
    15. // unknown or unlisted namespaced elements
    16. // check at runtime because it may get assigned a namespace when its
    17. // parent normalizes children
    18. vnode = new VNode(
    19. tag, data, children,
    20. undefined, undefined, context
    21. )
    22. }
    23. } else {
    24. // direct component options / constructor
    25. vnode = createComponent(tag, data, context, children)
    26. }

    这里先对 tag 做判断,如果是 string 类型,则接着判断如果是内置的一些节点,则直接创建一个普通 VNode,如果是为已注册的组件名,则通过 createComponent 创建一个组件类型的 VNode,否则创建一个未知的标签的 VNode。 如果是 tag 一个 Component 类型,则直接调用 createComponent 创建一个组件类型的 VNode 节点。对于 createComponent 创建组件类型的 VNode 的过程,我们之后会去介绍,本质上它还是返回了一个 VNode。

    总结

    那么至此,我们大致了解了 createElement 创建 VNode 的过程,每个 VNode 有 childrenchildren 每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DOM Tree。

    回到 mountComponent 函数的过程,我们已经知道 vm._render 是如何创建了一个 VNode,接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来,这个过程是通过 vm._update 完成的,接下来分析一下这个过程。

    原文: https://ustbhuangyi.github.io/vue-analysis/data-driven/create-element.html