今天我們來學習下Vue的渲染 Render 原始碼~

還是從初始化方法開始找程式碼，在 src/core/instance/index.js 中，先執行了 renderMixin 方法，然後在Vue例項化的時候執行了 vm._init 方法，在這個 vm._init 方法中執行了 initRender 方法。renderMixin 和 initRender 都在 src/core/instance/render.js 中，我們來看看程式碼：

renderMixin

首先來跟一下 renderMixin 的程式碼：

export function renderMixin (Vue: Class<Component>)
 
 {
  installRenderHelpers(Vue.prototype)

  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }

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

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

    vm.$vnode = _parentVnode
    let vnode
    try {
      // 執行 vue 例項的 render 方法
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      handleError(e, vm, `render`)
      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
      }
    }
    // 返回空vnode避免render方法報錯退出
    if (!(vnode instanceof VNode)) {
      vnode = createEmptyVNode()
    }
    // 父級Vnode
    vnode.parent = _parentVnode
    return vnode
  }
}

原始碼執行了 installRenderHelpers 方法，然後定義了 Vue 的 $nextTick 和 _render 方法。
先來看看 installRenderHelpers 方法：

export function installRenderHelpers (target: any) {
  target._o = markOnce
  target._n = toNumber // 數字
  target._s = toString // 字串
  target._l = renderList // 列表
  target._t = renderSlot
  target._q = looseEqual
  target._i = looseIndexOf
  target._m = renderStatic
  target._f = resolveFilter
  target._k = checkKeyCodes
  target._b = bindObjectProps
  target._v = createTextVNode
  target._e = createEmptyVNode
  target._u = resolveScopedSlots
  target._g = bindObjectListeners
}

這就是 Vue 的各類渲染方法了，從字面意思中可以知道一些方法的用途，這些方法用在Vue生成的渲染函式中。具體各個渲染函式的實現先不提~之後會專門寫部落格學習。
在 $nextTick 函式中執行了 nextTick 函式，找到該函式原始碼：

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

現在來說關鍵的 _render 方法，關鍵在這個 try…catch 方法中，執行了Vue例項中的 render 方法生成一個vnode。如果生成失敗，會試著生成 renderError 方法。如果vnode為空，則為vnode傳一個空的VNode，最後返回vnode物件。

initRender

接下來看下 render 的初始化過程：

export function initRender (vm: Component) {
  vm._vnode = null // the root of the child tree
  vm._staticTrees = null // v-once cached trees
  const options = vm.$options
  const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  // 將 createElement 方法繫結到這個例項，這樣我們就可以在其中得到適當的 render context。
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // 規範化一直應用於公共版本，用於使用者編寫的 render 函式。
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
  // 父級元件資料
  const parentData = parentVnode && parentVnode.data
  // 監聽事件
  defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
  defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
}

在 initRender 方法中，為Vue的例項方法添加了幾個屬性值，最後定義了 $attrs 和 $listeners 的監聽方法。
看下 createElement 方法：

// src/core/vdom/create-element.js
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 方法，由於該方法太長，就不貼出來費篇幅了，程式碼看這裡。最終返回一個 VNode 物件，VNode 物件由 createEmptyVNode 或 createComponent 方法得到的。
createEmptyVNode 建立了一個空的 VNode

// src/core/vdom/vnode.js
export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  node.text = text
  node.isComment = true
  return node
}

createComponent 建立了一個元件，最終也將返回一個 VNode 物件。

// src/core/vdom/create-component.js
export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return
  }
  const baseCtor = context.$options._base
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor)
  }
  if (typeof Ctor !== 'function') {
    return
  }

  let asyncFactory
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
    if (Ctor === undefined) {
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

  data = data || {}
  resolveConstructorOptions(Ctor)
  if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }
  const propsData = extractPropsFromVNodeData(data, Ctor, tag)
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }

  const listeners = data.on
  data.on = data.nativeOn

  if (isTrue(Ctor.options.abstract)) {
    const slot = data.slot
    data = {}
    if (slot) {
      data.slot = slot
    }
  }

  mergeHooks(data)
  // 建立元件的 VNode
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

  return vnode
}

初次渲染過程

既然是初次渲染，肯定會觸發 mounted 生命週期鉤子。所以我們從 mount 找起。在原始碼中定義了兩次 $mount 方法，第一次返回了 mountComponent 方法；第二次定義了 Vue 例項的 $options 選項中的一些資料，然後再執行第一次的 $mount 方法，即執行 mountComponent 方法。

// src/platforms/web/runtime/index.js
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  if (el === document.body || el === document.documentElement) {
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  return mount.call(this, el, hydrating)
}

這裡需要注意的是 compileToFunctions 方法，該方法的作用是將 template 編譯為 render 函式。
compileToFunctions 方法是一個編譯的過程，暫且不論。抓住主線，看渲染。所以去看看 mountComponent 方法：

// src/core/instance/lifecycle.js
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }

  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
  hydrating = false

  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

可以看到，在 beforeMount 和 mounted 生命週期之間的程式碼：建立一個更新方法，然後建立一個Watcher監聽該方法。

  let updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }

  new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)

在 new Watcher 監聽了 updateComponent 方法後，會立即執行 updateComponent 方法。在 updateComponent 方法中，我們之前提到 _render 方法最終返回一個編譯過的 VNode 物件，即虛擬 DOM，這裡我們就看看 _update 方法。

  // src/core/instance/lifecycle.js
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    if (vm._isMounted) {
      callHook(vm, 'beforeUpdate')
    }
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const prevActiveInstance = activeInstance
    activeInstance = vm
    vm._vnode = vnode

    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(
        vm.$el, vnode, hydrating, false /* removeOnly */,
        vm.$options._parentElm,
        vm.$options._refElm
      )
      vm.$options._parentElm = vm.$options._refElm = null
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    activeInstance = prevActiveInstance
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
  }

從註釋可以看出，初次渲染會走到 vm.__patch__ 方法中，這個方法就是比對虛擬 DOM ，區域性更新 DOM 的方法，關於虛擬 DOM 和 VNode 節點，之後再聊。

小結一下

• 通過 renderMixin 方法來定義一些渲染屬性。
• initRender 定義了各類渲染選項，並且對一些屬性進行監聽。
• $mount 方法執行了 mountComponent 方法，監聽
  updateComponent 方法並執行 _update 方法。
• _update 方法中執行 __patch__ 方法渲染 VNode。

最後

這裡簡單理了理 render 渲染的程式碼流程，更深入的關於虛擬 DOM 的內容在下一篇中繼續研究~
這裡再提出幾個問題，之後學習和解決：

• template 的具體編譯細節
• 已知 data 資料監測，如何在改變資料後對改變介面的顯示。
• 深入理解虛擬 DOM 的原理
• 學習全域性 API 的原始碼
• 瞭解各類工具類
• 瞭解 AST 語法樹是什麼~

計劃3月底完成Vue原始碼的系統學習，之後轉戰vue-router、vuex、vuxt、 devtools、webpack、vue-loader，今年目標把Vue全家老小、親戚朋友都學習一遍！加油！

Vue.js學習系列

鑑於前端知識碎片化嚴重，我希望能夠系統化的整理出一套關於Vue的學習系列部落格。

Vue.js學習系列專案地址

關於作者

VioletJack，高效學習前端工程師，喜歡研究提高效率的方法，也專注於Vue前端相關知識的學習、整理。
歡迎關注、點贊、評論留言~我將持續產出Vue相關優質內容。