Vue 的_render方法是實例的一個私有方法，它用來把實例渲染成一個虛擬 Node。它的定義在src/core/instance/render.js文件中：

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

  // reset _rendered flag on slots for duplicate slot check
  if (process.env.NODE_ENV !== 'production') {
    for (const key in vm.$slots) {
      // $flow-disable-line
      vm.$slots[key]._rendered = false
    }
  }

  if (_parentVnode) {
    vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
  }

  // 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 {
    vnode = render.call(vm._renderProxy, vm.$createElement)
  } catch (e) {
    handleError(e, vm, `render`)
    // return error render result,
    // or previous vnode to prevent render error causing blank component
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      if (vm.$options.renderError) {
        try {
          vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
        } catch (e) {
          handleError(e, vm, `renderError`)
          vnode = vm._vnode
        }
      } else {
        vnode = vm._vnode
      }
    } else {
      vnode = vm._vnode
    }
  }
  // return empty vnode in case the render function errored out
  if (!(vnode instanceof VNode)) {
    if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
      warn(
        'Multiple root nodes returned from render function. Render function ' +
        'should return a single root node.',
        vm
      )
    }
    vnode = createEmptyVNode()
  }
  // set parent
  vnode.parent = _parentVnode
  return vnode
}

這段代碼最關鍵的是render方法的調(diào)用，我們在平時的開發(fā)工作中手寫render方法的場景比較少，而寫的比較多的是template模板，在之前的mounted方法的實現(xiàn)中，會把template編譯成render方法，但這個編譯過程是非常復雜的，我們不打算在這里展開講，之后會專門花一個章節(jié)來分析 Vue 的編譯過程。

在 Vue 的官方文檔中介紹了render函數(shù)的第一個參數(shù)是createElement，那么結合之前的例子：

<div id="app">
  {{ message }}
</div>

相當于我們編寫如下render函數(shù)：

render: function (createElement) {
  return createElement('div', {
     attrs: {
        id: 'app'
      },
  }, this.message)
}

再回到_render函數(shù)中的render方法的調(diào)用：

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

可以看到，render函數(shù)中的createElement方法就是vm.$createElement方法：

export function initRender (vm: Component) {
  // ...
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // 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.$createElement方法定義是在執(zhí)行initRender方法的時候，可以看到除了vm.$createElement方法，還有一個vm._c方法，它是被模板編譯成的render函數(shù)使用，而vm.$createElement是用戶手寫render方法使用的， 這倆個方法支持的參數(shù)相同，并且內(nèi)部都調(diào)用了createElement方法。

總結

vm._render最終是通過執(zhí)行createElement方法并返回的是vnode，它是一個虛擬 Node。Vue 2.0 相比 Vue 1.0 最大的升級就是利用了 Virtual DOM。因此在分析createElement的實現(xiàn)前，我們先了解一下 Virtual DOM 的概念。

-----------------轉自慕課網(wǎng)vue源碼解析視頻教程的內(nèi)容-----------------

總結

以上是生活随笔為你收集整理的render（七）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。