iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
Modern Web

技術在走,Vue.js 要有系列 第 6

|D6| 從原始碼看 Vue 渲染機制 (4) - render


圖片來源: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


上一篇
|D5| 從原始碼看 Vue 渲染機制 (3) - createElement
下一篇
|D7| 從原始碼看 Vue 渲染機制 (5) - $mount
系列文
技術在走,Vue.js 要有30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言