1. 介绍

版本：2.5.17。

我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。

学习文档：https://ustbhuangyi.github.io/vue-analysis/data-driven/create-element.html

2. createElement

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

export function createElement (
  context: Component,  // vm实例
  tag: any, //标签
  data: any, // vnode的数据
  children: any, // vnode的子节点，进而可以构建vnode树进而映射DOM树
  normalizationType: any, 
  alwaysNormalize: boolean
): VNode | Array<VNode> {
 //如果传入参数时，没有传data这个参数，那么实参和形参改变对应顺序
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  //去调用 _createElement
  return _createElement(context, tag, data, children, normalizationType)
}

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

// _createElement 方法有 5 个参数，
// context 表示 VNode 的上下文环境，它是 Component 类型；
// tag 表示标签，它可以是一个字符串，也可以是一个 Component；
// data 表示 VNode 的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到它的定义；
// children 表示当前 VNode 的子节点，它是任意类型的，它接下来需要被规范为标准的 VNode 数组；
// normalizationType 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。
export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  if (isDef(data) && isDef((data: any).__ob__)) {
    process.env.NODE_ENV !== 'production' && warn(
      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
      'Always create fresh vnode data objects in each render!',
      context
    )
    return createEmptyVNode()
  }
  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    if (!__WEEX__ || !('@binding' in data.key)) {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      )
    }
  }
  // support single function children as default scoped slot
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

_createElement 方法有 5 个参数：

1.context 表示 VNode 的上下文环境，它是 Component 类型；

2.tag表示标签，它可以是一个字符串，也可以是一个 Component；

3.data 表示 VNode 的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到它的定义

4.children 表示当前 VNode 的子节点，它是任意类型的，它接下来需要被规范为标准的 VNode 数组；

5.normalizationType 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。

3.children 的规范化

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

_createElement方法会根据normalizationType不同调用不同方法
SIMPLE_NORMALIZE = 1，ALWAYS_NORMALIZE = 2

if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }

3.1 方法

以下方法都定义在们的定义都在 src/core/vdom/helpers/normalzie-children.js 中

3.1.1 simpleNormalizeChildren

// 对children进行遍历，（只会有一层深度）
export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
   // 如果是二维数组，就将其concat为一维数组
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  // 返回一维数组，数组中每一个元素都是一个vnode
  return children
}

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

3.1.2 normalizeChildren

export function normalizeChildren (children: any): ?Array<VNode> {
//如果传入的是基本数据类型，例如this.message代表的字符串，那么就创建一个文本结点
  return isPrimitive(children)
      //调用createTextVNode函数，其实就是将其tostring，返回一个文本结点vnode
    ? [createTextVNode(children)]
      // 如果是 isArray，就调用normalizeArrayChildren方法
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}

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

3.1.3 normalizeArrayChildren

function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  const res = []
  let i, c, lastIndex, last
  // 遍历children
  for (i = 0; i < children.length; i++) {
    c = children[i]
    if (isUndef(c) || typeof c === 'boolean') continue
    lastIndex = res.length - 1
    last = res[lastIndex]
    //  如果是数组，递归children
    if (Array.isArray(c)) {
      if (c.length > 0) {
        c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
        // 合并相连的两个文本节点
        if (isTextNode(c[0]) && isTextNode(last)) {
          res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
          c.shift()
        }
        res.push.apply(res, c)
      }
      // 如果children是基础类型
    } else if (isPrimitive(c)) {
        // 合并相邻TextNode
      if (isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
          //放到数组中
        res.push(createTextVNode(c))
      }
    } else {
      if (isTextNode(c) && isTextNode(last)) {
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res
}

normalizeArrayChildren 接收 2 个参数：

children 表示要规范的子节点
nestedIndex 表示嵌套的索引，因为单个 child 可能是一个数组类型。

normalizeArrayChildren 主要的逻辑：

就是遍历 children，获得单个节点 c，
然后对 c 的类型判断，如果是一个数组类型，则递归调用 normalizeArrayChildren;
如果是基础类型，则通过 createTextVNode 方法转换成 VNode 类型；
否则就已经是 VNode 类型了，如果 children 是一个列表并且列表还存在嵌套的情况，则根据 nestedIndex 去更新它的key。

这里需要注意一点，在遍历的过程中，对这 3 种情况都做了如下处理：如果存在两个连续的 text 节点，会把它们合并成一个 text 节点。

3.1.4 总结

children 的规范化，children 变成了一个类型为 VNode 的 Array。也就是说Array中每一个元素都是VNode（虚拟DOM）。
simpleNormalizeChildren(children): 遍历最多二维，输出元素都是VNode的一维array
normalizeChildren ：可遍历多层，合并两个连续的 text 节点，输出元素都是VNode的一维array

4. VNode 的创建

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

et vnode, ns
//对 tag 做判断
if (typeof tag === 'string') {
  let Ctor
  ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
  //如果是内置的节点，例如我们常用的<div id="app"></div>
  if (config.isReservedTag(tag)) {
    // 创建 vnode，config.parsePlatformTagName(tag)为平台的保留标签
    vnode = new VNode(
      config.parsePlatformTagName(tag), data, children,
      undefined, undefined, context
    )
  } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
    // 对组件进行解析
    vnode = createComponent(Ctor, data, context, children, tag)
  } else {
    // 如果是不认识的标签
    vnode = new VNode(
      tag, data, children,
      undefined, undefined, context
    )
  }
} else {
  // direct component options / constructor
  vnode = createComponent(tag, data, context, children)
}

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

5. 总结

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

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

vue的源码学习之五——6.数据驱动（createElement）