4.3 Vnode的创建

先简单回顾一下挂载的流程，挂载的过程调用的是Vue实例上$mount方法，而$mount的核心是mountComponent方法。在这之前，如果我们传递的是template模板，会经过一系列的模板编译过程，并根据不同平台生成对应代码，浏览器对应的是render函数;如果传递的是render函数，则忽略模板编译过程。有了render函数后，调用vm._render()方法会将render函数转化为Virtual DOM，最终利用vm._update()将Virtual DOM渲染为真实的DOM。

Vue.prototype.$mount = function(el, hydrating) {
    ···
    return mountComponent(this, el)
}
function mountComponent() {
    ···
    updateComponent = function () {
        vm._update(vm._render(), hydrating);
    };
}

vm._render()方法会将render函数转化为Virtual DOM,我们看源码中如何定义的。

// 引入Vue时，执行renderMixin方法，该方法定义了Vue原型上的几个方法，其中一个便是 _render函数
renderMixin();//
function renderMixin() {
    Vue.prototype._render = function() {
        var ref = vm.$options;
        var render = ref.render;
        ···
        try {
            vnode = render.call(vm._renderProxy, vm.$createElement);
        } catch (e) {
            ···
        }
        ···
        return vnode
    }
}

抛开其他代码，_render函数的核心是render.call(vm._renderProxy, vm.$createElement)部分，vm.$createElement方法会作为render函数的参数传入。这个参数也是在手写render函数时使用的createElement参数的由来

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('div', {}, this.message)
    },
    data() {
        return {
            message: 'dom'
        }
    }
})

vm.$createElement 是Vue中initRender所定义的方法,其中 vm._c 是template内部编译成render函数时调用的方法，vm.$createElement是手写render函数时调用的方法。两者的唯一区别是：内部生成的render方法可以保证子节点都是Vnode(下面有特殊的场景)，而手写的render需要一些检验和转换。

function initRender(vm) {
    vm._c = function(a, b, c, d) { return createElement(vm, a, b, c, d, false); }
    vm.$createElement = function (a, b, c, d) { return createElement(vm, a, b, c, d, true); };
}

createElement 方法实际上是对 _createElement 方法的封装，在调用_createElement创建Vnode之前，会对传入的参数进行处理。例如当没有data数据时，参数会往前填充。

function createElement (
    context, // vm 实例
    tag, // 标签
    data, // 节点相关数据，属性
    children, // 子节点
    normalizationType,
    alwaysNormalize // 区分内部编译生成的render还是手写render
  ) {
    // 对传入参数做处理，可以没有data，如果没有data，则将第三个参数作为第四个参数使用，往上类推。
    if (Array.isArray(data) || isPrimitive(data)) {
      normalizationType = children;
      children = data;
      data = undefined;
    }
    // 根据是alwaysNormalize 区分是内部编译使用的，还是用户手写render使用的
    if (isTrue(alwaysNormalize)) {
      normalizationType = ALWAYS_NORMALIZE;
    }
    return _createElement(context, tag, data, children, normalizationType) // 真正生成Vnode的方法
  }

4.3.1 数据规范检测

Vue既然暴露给用户用render函数去写渲染模板，就需要考虑用户操作带来的不确定性，因此在生成Vnode的过程中，_createElement会先进行数据规范的检测，将不合法的数据类型错误提前暴露给用户。接下来将列举几个容易犯错误的实际场景，方便理解源码中如何处理这类错误的。

• • 用响应式对象做节点属性

new Vue({
    el: '#app',
    render: function (createElement, context) {
       return createElement('div', this.observeData, this.show)
    },
    data() {
        return {
            show: 'dom',
            observeData: {
                attr: {
                    id: 'test'
                }
            }
        }
    }
})

• • 特殊属性key为非字符串，数字类型

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('div', { key: this.lists }, this.lists.map(l => {
           return createElement('span', l.name)
        }))
    },
    data() {
        return {
            lists: [{
              name: '111'
            },
            {
              name: '222'
            }
          ],
        }
    }
})

这些规范都会在创建Vnode节点之前发现并报错，源代码如下：

function _createElement (context,tag,data,children,normalizationType) {
    // 数据对象不能是定义在Vue data属性中的响应式数据。
    if (isDef(data) && isDef((data).__ob__)) {
      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() // 返回注释节点
    }
    // 针对动态组件 :is 的特殊处理，组件相关知识放到特定章节分析。
    if (isDef(data) && isDef(data.is)) {
      tag = data.is;
    }
    if (!tag) {
      // 防止动态组件 :is 属性设置为false时，需要做特殊处理
      return createEmptyVNode()
    }
    // key值只能为string，number这些原始数据类型
    if (isDef(data) && isDef(data.key) && !isPrimitive(data.key)
    ) {
      {
        warn(
          'Avoid using non-primitive value as key, ' +
          'use string/number value instead.',
          context
        );
      }
    }
    ···
    // 省略后续操作
  }

4.3.2 子节点children规范化

Virtual DOM需要保证每一个子节点都是Vnode类型,这里分两种场景。

• 1.render函数编译，理论上通过render函数编译生成的都是Vnode类型，但是有一个例外，函数式组件返回的是一个数组(关于组件，以及函数式组件内容，我们放到专门讲组件的时候专题分析),这个时候Vue的处理是将整个children拍平。
• 2.用户定render函数，这个时候也分为两种情况，一个是chidren为文本节点，这时候通过前面介绍的createTextVNode 创建一个文本节点的 VNode; 另一种相对复杂，当children中有v-for的时候会出现嵌套数组，这时候的处理逻辑是，遍历children，对每个节点进行判断，如果依旧是数组，则继续递归调用，直到类型为基础类型时，调用createTextVnode方法转化为Vnode。这样经过递归，children变成了一个类型为Vnode的数组。

function _createElement() {
    ···
    if (normalizationType === ALWAYS_NORMALIZE) {
      // 用户定义render函数
      children = normalizeChildren(children);
    } else if (normalizationType === SIMPLE_NORMALIZE) {
      // render 函数是编译生成的
      children = simpleNormalizeChildren(children);
    }
}
// 处理编译生成的render 函数
function simpleNormalizeChildren (children) {
    for (var i = 0; i < children.length; i++) {
        // 子节点为数组时，进行开平操作，压成一维数组。
        if (Array.isArray(children[i])) {
        return Array.prototype.concat.apply([], children)
        }
    }
    return children
}
// 处理用户定义的render函数
function normalizeChildren (children) {
    // 递归调用，直到子节点是基础类型，则调用创建文本节点Vnode
    return isPrimitive(children)
      ? [createTextVNode(children)]
      : Array.isArray(children)
        ? normalizeArrayChildren(children)
        : undefined
  }
// 判断是否基础类型
function isPrimitive (value) {
    return (
      typeof value === 'string' ||
      typeof value === 'number' ||
      typeof value === 'symbol' ||
      typeof value === 'boolean'
    )
  }

=== 进行数据检测和组件规范化后，接下来通过new VNode便可以生成一棵`VNode树。===具体细节由于篇幅原因，不展开分析。