圖片來源：w3cplus

Vue.js 文件

• Compiler: code that is responsible for compiling template strings into JavaScript render functions.

編譯：將 template 模板編譯為 JavaScript render functions

上圖可以看出 Vue 的運作流程，我們把 render function 當作分水嶺，

• 左半邊是 Compiler(編譯)時期，主要是將 template 模板編譯成 render function
• 右半邊是 Runtime(運行)時期，主要是
  • 調用 render function ，生成 Virtual DOM Tree
  • Watcher ：每個 Vue 實例都有相對應的 Watcher，作用是在 Vue 實例的 data 資料有更新時，會觸發 re-render 重新渲染
  • diff： 對比新舊 Virtual DOM Tree 的不同，收集差異
  • patch：將差異用到真實 DOM Tree

前面提到，在 new Vue 的時候執行了 initRender 方法和 renderMixin 方法，這兩個方法實作在 src/core/instance/render.js 中

// src/core/instance/index.js

function Vue (options) {
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

// src/core/instance/init.js

export function initMixin (Vue: Class<Component>) {
   Vue.prototype._init = function (options?: Object) {
        vm._self = vm
        initLifecycle(vm)
        initEvents(vm)
        initRender(vm)
        callHook(vm, 'beforeCreate')
        initInjections(vm) 
        initState(vm)
        initProvide(vm) 
        callHook(vm, 'created')

        if (vm.$options.el) {
          vm.$mount(vm.$options.el)
        }
   }
}

// 在 `src/core/instance/render.js` 中

/**********************************************
   在 initRender 方法中，替 Vue 實例創建 VNode 和定義 $attrs 和 $listeners 的監聽方法
  ***********************************************/
export function initRender (vm: Component) {
  vm._vnode = null 
  vm._staticTrees = null // v-once cached trees
  const options = vm.$options
  const parentVnode = vm.$vnode = options._parentVnode 
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  
  /**********************************************
   在 `template` 模板編譯成 render function 的情境下使用
  ***********************************************/
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  
  /**********************************************
   在元件裡有我們寫的 render function 的情境下使用
  ***********************************************/
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  const parentData = parentVnode && parentVnode.data

  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
  /**********************************************
   定義 $attrs 和 $listeners 的監聽方法
  ***********************************************/
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
  }
}

export let currentRenderingInstance: Component | null = null


export function setCurrentRenderingInstance (vm: Component) {
  currentRenderingInstance = vm
}

/**********************************************
   renderMixin 方法定義 Vue 實例的私有方法 `_render`
***********************************************/
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
  ***********************************************/
    const { render, _parentVnode } = vm.$options

    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      )
    }
    
  /**********************************************
   設置父層 vnode，讓 `render` function 可以訪問到 placeholder node 的 data
  ***********************************************/
    vm.$vnode = _parentVnode

    let vnode
    try {
      currentRenderingInstance = vm
      
  /**********************************************
   使用 call 方法， 把 this 指向 vm._renderProxy ，
   實際上是執行 vm._renderProxy.render(vm.$createElement)
  ***********************************************/
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      handleError(e, vm, `render`)
      
      if (process.env.NODE_ENV !== 'production' && 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
      }
    } finally {
      currentRenderingInstance = null
    }
    
    if (Array.isArray(vnode) && vnode.length === 1) {
      vnode = vnode[0]
    }
  /**********************************************
   返回空 vnode ，避免 render 方法報錯
  ***********************************************/
    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 方法把 data 的資料保存到 VNode ，創建 VNode ，那 VNode 到底什麼時候被渲染到真正 的 DOM 上？$mount

下一篇就來看看 $mount