Vue源碼中compiler部分邏輯梳理（内有彩蛋）

一. 簡述

compiler

子產品Vue架構中用于模闆編譯的，它的作用就是将Vue中的元件模闆轉換成

render

函數，

render

函數在運作時可以生成虛拟節點

vnode

，它是Vue中虛拟DOM樹的基本實作流程。完整版的Vue是包含

runtime

和

compiler

的，也就是說模闆的編譯過程可以在運作時進行，這無疑是一種性能負擔。Vue官方也提供了獨立的

runtime

版本，其中隻包含運作時環境，把從

template

到

render

函數的生成部分放在建構時完成（利用

vue-templete-compiler

子產品），以提高運作時的效率。

由于跨平台需求，

compiler

子產品的實作過程步驟稍多，不斷地利用高階函數來拆分整體邏輯，不是很容易閱讀，本篇對該子產品的基本流程進行一個梳理，再參考文末彩蛋推薦的電子書，就比較容易看懂了。

二. 編譯流程

相關入口在執行個體挂載函數

$mount

的實作中:

Vue.prototype.$mount = function(){
    const options = this.$options
    //....
     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)
}           

複制

可以看到執行個體挂載方法

$mount

的邏輯就是在調用

mount

方法前在執行個體的

$options

添加了額外的資訊。此處調用的

compileToFunctions

方法經曆的邏輯跳轉了多層高階函數，涉及檔案也比較多，直接上圖比較清楚：

筆者将涉及函數簡化為輸入輸出的形式：

核心邏輯步驟如下所示：

梳理完流程，整個編譯流程的宏觀流程也就相對清晰了，這裡為了兼顧不同平台的方法差異，将有差異的部分提取為獨立的子產品，然後作為函數參數注入執行函數，這種通過高階函數來組織代碼的方式能提高核心邏輯的聚合程度，如果是普通的業務邏輯，很可能會是以扁平化串聯調用的形式來編寫方法的，筆者個人認為兩種模式沒有絕對的優劣對比，雖然高階函數看起來更進階。