Vue源码分析之 createElement

这是我参与更文挑战的第15天，活动详情查看： 更文挑战

前言

在学习diff算法的时候已经看过了Vue在patch过程中是通过createElm来创建真实DOM节点的。但是我们知道虚拟DOM才是Vue贯穿始终的重点。在Vue官方文档中说过，Vue是通过createElemnet来创建虚拟节点的，接下来就来具体看下createElment到底是怎么实现的？？

下边是一个我们经常写的一段代码：

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

这段代码主要功能是创建了一个Vue实例并挂载到app上。在最后$mount挂载实例的的时候调用的mountComponent方法中有个重点函数:_render

_render

在看createElement之前，先来看下_render函数。该函数是Vue实例的一个私有方法，它的作用就是把Vue实例渲染成一个VNode，定义在src/core/instance/render.js中。

Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    if (_parentVnode) {
        vm.$scopedSlots = normalizeScopedSlots(
            _parentVnode.data.scopedSlots,
            vm.$slots,
            vm.$scopedSlots
        )
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode
    
    // render self
    let vnode
    try{
        currentRenderingInstance = vm
        vnode = render.call(vm._renderProxy, vm.$createElement)
    }catch(e){
        ...
    }.finally{
        currentRenderingInstance = null
    }
    
        
    // if the returned array contains only a single node, allow it
    if (Array.isArray(vnode) && vnode.length === 1) {
        vnode = vnode[0]
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
        vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
}

从代码中看到_render函数主要是调用了render方法，开发者平时工作中应该很少去手写render函数，大部分都是写template，然后在对应的mounted方法中，把template编译成render函数。

render函数

Vue所有的组件渲染最后都会转化为render函数，简单看下官方文档中介绍的render用法：

render函数的第一个参数是createElment，那么我们的代码render: h => h(App)其实就类似于render:function(createElement){return createElment(App)}。至于为什么用h，搜了下，来自于Hyperscript

其实render函数还有第二个参数context，官方文档具体介绍了这个参数需要的值，这里不多赘述。

回到Vue.prototype._render的调用，createElement就是vm.$createElment

const { render, _parentVnode } = vm.$options
vnode = render.call(vm._renderProxy, vm.$createElement)

$createElement定义在initRender函数中，在src/core/instance/init.js

export function initRender (vm: Component) {
  ...
  
  // internal version is used by render functions compiled from templates
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // normalization is always applied for the public version, used in
  // user-written render functions.
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  
  ...
}

注释写的很清楚，vm.$createElment函数是给用户自己写的render方法用的

还定义了一个vm._c，是用来给模板编译后的render函数用的。

总体来说这两种方式都是调用了createElement方法。

_renderProxy定义在_init函数定义，在src/core/instance/init.js

if (process.env.NODE_ENV !== 'production') {
    initProxy(vm)
} else {
    vm._renderProxy = vm
}

createElement

createElment函数其实就是调用了_createElement

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: number,
): 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方法

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__)) {
    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()
  }
  
  ...
  
  // 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 ((!data || !data.pre) && 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接收五个参数：Vnode的上下文环境，标签，data，子节点以及子节点的规范类型。normalizationType是一个number类型，不同的类型子节点的规范方式也不同，主要取决于render参数是模板编译生成的还是用户手写的。

可以看出_createElement主要做了以下事情：

• 规范化children
• 根据tag类型的不同，调用new Vnode创建普通Vnode或者调用createComponet去创建组件类型的Vnode。
• 最后根据不同的vnode再做相应的处理，返回这个vnode

普通Vnode类型前边diff算法的时候也介绍过，组件级别的Vnode后边专门介绍，接下来看下规范化children的流程：

规范子节点

规范子节点主要是根据规范类型字段不同分别调用了normalizeChildren和simpleNormalizeChildren，这两个函数定义在src/core/vdom/helpers/normalize-children.js

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

simpleNormalizeChildren

simpleNormalizeChildren方法是当render函数式模板编译生成时调用。注释写的很详细，一般来说，编译生成的render函数的children都是Vnode类型。但是有个特殊的情况，functional component会返回一个数组而不是一个根节点，所以需要concat去拍平，保证它只有一层深度。

// The template compiler attempts to minimize the need for normalization by
// statically analyzing the template at compile time.
//
// For plain HTML markup, normalization can be completely skipped because the
// generated render function is guaranteed to return Array<VNode>. There are
// two cases where extra normalization is needed:
// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.

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
}

normalizeChildren

normalizeChildren应用场景有两种：一种是编译template，slot，v-for的时候会产生嵌套数组的情况；另一种是children参数来与用户手写的render函数。

当children是用户手写的基础类型时，会调用createTextVnode创建一个文本节点；当children是数组时，会调用normalizeArrayChildren方法。

// 2. When the children contains constructs that always generated nested Arrays,
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}

看一下normalizeArrayChildren方法：

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)) {
      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)) {
      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 {
      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
}

首先来复习下，数组本身是对象，是可以为其添加属性，但不改变数组长度：

言归正传，normalizeArrayChildren会去遍历children，将当前遍历项赋值给变量c。

然后去判断c是不是数组，如果是继续递归执行normalizeArrayChildren；否则判断c是否是基础类型，如果是则调用createTextVNode方法转化成VNode类型；否则就说明c已经是一个VNode类型了，接下来判断children._isVList属性，如果为true，说明是一个嵌套的列表数组，如由v-for形成，则用传入的的第二个参数nestedIndex去更新key。

在代码中有个last参数保留着res数组中的最后一个节点，它主要是用来判断是不是和当前判断的节点是连续的文本节点，如果是则合并成一个text节点，赋值给res[lastIndex]