• render
    • 总结

    render

    Vue 的 _render 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node。它的定义在 src/core/instance/render.js 文件中：

    1. Vue.prototype._render = function (): VNode {
    2.   const vm: Component = this
    3.   const { render, _parentVnode } = vm.$options
    5.   // reset _rendered flag on slots for duplicate slot check
    6.   if (process.env.NODE_ENV !== 'production') {
    7.     for (const key in vm.$slots) {
    8.       // $flow-disable-line
    9.       vm.$slots[key]._rendered = false
    10.     }
    11.   }
    13.   if (_parentVnode) {
    14.     vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
    15.   }
    17.   // set parent vnode. this allows render functions to have access
    18.   // to the data on the placeholder node.
    19.   vm.$vnode = _parentVnode
    20.   // render self
    21.   let vnode
    22.   try {
    23.     vnode = render.call(vm._renderProxy, vm.$createElement)
    24.   } catch (e) {
    25.     handleError(e, vm, `render`)
    26.     // return error render result,
    27.     // or previous vnode to prevent render error causing blank component
    28.     /* istanbul ignore else */
    29.     if (process.env.NODE_ENV !== 'production') {
    30.       if (vm.$options.renderError) {
    31.         try {
    32.           vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
    33.         } catch (e) {
    34.           handleError(e, vm, `renderError`)
    35.           vnode = vm._vnode
    36.         }
    37.       } else {
    38.         vnode = vm._vnode
    39.       }
    40.     } else {
    41.       vnode = vm._vnode
    42.     }
    43.   }
    44.   // return empty vnode in case the render function errored out
    45.   if (!(vnode instanceof VNode)) {
    46.     if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
    47.       warn(
    48.         'Multiple root nodes returned from render function. Render function ' +
    49.         'should return a single root node.',
    50.         vm
    51.       )
    52.     }
    53.     vnode = createEmptyVNode()
    54.   }
    55.   // set parent
    56.   vnode.parent = _parentVnode
    57.   return vnode
    58. }

    这段代码最关键的是 render 方法的调用，我们在平时的开发工作中手写 render 方法的场景比较少，而写的比较多的是 template 模板，在之前的 mounted 方法的实现中，会把 template 编译成 render 方法，但这个编译过程是非常复杂的，我们不打算在这里展开讲，之后会专门花一个章节来分析 Vue 的编译过程。

    在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createElement，那么结合之前的例子：

    1. <div id="app">
    2.   {{ message }}
    3. </div>

    相当于我们编写如下 render 函数：

    1. render: function (createElement) {
    2.   return createElement('div', {
    3.      attrs: {
    4.         id: 'app'
    5.       },
    6.   }, this.message)
    7. }

    再回到 _render 函数中的 render 方法的调用：

    1. vnode = render.call(vm._renderProxy, vm.$createElement)

    可以看到，render 函数中的 createElement 方法就是 vm.$createElement 方法：

    1. export function initRender (vm: Component) {
    2.   // ...
    3.   // bind the createElement fn to this instance
    4.   // so that we get proper render context inside it.
    5.   // args order: tag, data, children, normalizationType, alwaysNormalize
    6.   // internal version is used by render functions compiled from templates
    7.   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
    8.   // normalization is always applied for the public version, used in
    9.   // user-written render functions.
    10.   vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
    11. }

    实际上，vm.$createElement 方法定义是在执行 initRender 方法的时候，可以看到除了 vm.$createElement 方法，还有一个 vm._c 方法，它是被模板编译成的 render 函数使用，而 vm.$createElement 是用户手写 render 方法使用的， 这俩个方法支持的参数相同，并且内部都调用了 createElement 方法。

    总结

    vm._render 最终是通过执行 createElement 方法并返回的是 vnode，它是一个虚拟 Node。Vue 2.0 相比 Vue 1.0 最大的升级就是利用了 Virtual DOM。因此在分析 createElement 的实现前，我们先了解一下 Virtual DOM 的概念。

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