Vue源码笔记 — 数据驱动--createElement

Vue版本：2.5.17-beta.0

《Vue源码笔记 — 数据驱动--render》中记录过，通过 vm.$createElement 函数创建 vnode 数据返回，下面记录 vm.$createElement 的普通节点创建 vnode 实现过程。

new Vue({
  el: '#app',
  render: createElement => createElement('div', { attrs: { id: 'app' } }, 'Hello Vue!')
})

上述示例就是使用 vm.$createElement 创建普通节点vnode最终挂载到dom中。而 vm.$createElement 是调用 createElement 方法，createElement 在 src/core/vdom/create-element.js 文件中，源码如下：

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  // 对参数个数不一致的一种处理
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}

从上述源码中可看出，在 createElement 函数中主要是对参数做了一层处理，之后就会调用 _createElement 函数，源码如下：

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
  }
  // 没有 tag 返回一个注释节点
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  // 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
  }
  // 对children处理 变成一个一维数组
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  // tag: string/object
  // tag 为 string，现判断是否为html 是直接创建vnode，不是通过resolveAsset从vm.$options中查找组件 找到创建组件vnode，再找不到就创建一个不认识tag的vnode
  if (typeof tag === 'string') {
    let Ctor
    // namespace 处理
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    // 判断 tag 是否为html原生的保留标签
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      // config.parsePlatformTagName(tag): 创建平台保留标签
      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
      // 不认识的 tag 创建vnode
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else { // 当 render: h => h(App) 时传入的是组件则tag为对象 走此逻辑
    // 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()
  }
}

上述源码中主要关注两点即可，一个是对 children 处理，一个是生成 vnode 数据。

children 处理是在如下代码中：

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

源码中可看出，根据 normalizationType 调用不同的方法处理 children，而 normalizationType 是从 createElement 中携带而来，下面是 normalizeChildren 和 simpleNormalizeChildren 的源码:

export function simpleNormalizeChildren (children: any) {
  for (let i = 0; i < children.length; i++) {
    if (Array.isArray(children[i])) {
      return Array.prototype.concat.apply([], children)
    }
  }
  return children
}


export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}

function isTextNode (node): boolean {
  return isDef(node) && isDef(node.text) && isFalse(node.isComment)
}

function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  const res = []
  let i, c, lastIndex, last
  for (i = 0; i < children.length; i++) {
    c = children[i]
    if (isUndef(c) || typeof c === 'boolean') continue
    lastIndex = res.length - 1
    last = res[lastIndex]
    //  nested
    if (Array.isArray(c)) {
      // 当前子节点为数组 递归调用 normalizeArrayChildren
      if (c.length > 0) {
        c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
        // merge adjacent text nodes
        // 当前子节点和下次要处理的子节点 都是文本节点 就合并成一个
        if (isTextNode(c[0]) && isTextNode(last)) {
          res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
          c.shift()
        }
        res.push.apply(res, c)
      }
    } else if (isPrimitive(c)) {
      // 当前子节点为基础类型 判断下一个处理节点是否为文本 
      // 是就合并成一个 不是就push
      if (isTextNode(last)) {
        // merge adjacent text nodes
        // this is necessary for SSR hydration because text nodes are
        // essentially merged when rendered to HTML strings
        res[lastIndex] = createTextVNode(last.text + c)
      } else if (c !== '') {
        // convert primitive to vnode
        res.push(createTextVNode(c))
      }
    } else {
      // 当前子节点为 vnode节点
      // 判断子节点是否为文本节点 下一个处理节点是否为文本节点
      // 是就合并成一个 不是就push
      if (isTextNode(c) && isTextNode(last)) {
        // merge adjacent text nodes
        res[lastIndex] = createTextVNode(last.text + c.text)
      } else {
        // default key for nested array children (likely generated by v-for)
        if (isTrue(children._isVList) &&
          isDef(c.tag) &&
          isUndef(c.key) &&
          isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__`
        }
        res.push(c)
      }
    }
  }
  return res
}

上述源码中可看到，simpleNormalizeChildren 函数相对简单一些，判断 children 中的子级是否有数组，有就把 children 给拍平成一维数组返回。
normalizeChildren 函数相对复杂一些，如果传入的 children 是原始类型就创建一个文字vnode返回，如果为数组就调用 normalizeArrayChildren 方法，而 normalizeArrayChildren 函数主要做的事情是把 children 中没有生成vnode数据的文字节点给创建成文字vnode。

生成 vnode 数据处理是在如下代码中：

if (typeof tag === 'string') {
    let Ctor
    // namespace 处理
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    // 判断 tag 是否为html原生的保留标签
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      // config.parsePlatformTagName(tag): 创建平台保留标签
      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
      // 不认识的 tag 创建vnode
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
}

上述源码可看到，首先判断了传入的 tag 是否为 string 类型，如果是则判断 tag 是否为 html 原生保留标签，如果是则直接调用 VNode 类创建 vnode 数据并返回，如果不是则会走 esle if 判断是否能从 vm.$options.components 中获取组件信息（组件内容会以后记录），如果还是找不到则会走 esle 逻辑，创建不认识的 tag 的 vnode 数据。

而 tag、data、children 参数就是在最开始的 Vue 示例的 render 函数中返回的 createElement 方法：

  render: createElement => createElement('div', { attrs: { id: 'app' } }, 'Hello Vue!')