深入剖析Vue原始碼 - 例項掛載,編譯流程
在正文開始之前，先了解vue基於原始碼構建的兩個版本，一個是 runtime only ，另一個是 runtime加compiler 的版本，兩個版本的主要區別在於後者的原始碼包括了一個編譯器。
什麼是編譯器，百度百科上面的解釋是
簡單講，編譯器就是將“一種語言（通常為高階語言）”翻譯為“另一種語言（通常為低階語言）”的程式。一個現代編譯器的主要工作流程：原始碼 (source code) → 前處理器 (preprocessor) → 編譯器 (compiler) → 目的碼 (object code) → 連結器 (Linker) → 可執行程式 (executables)。
通俗點講，編譯器是一個提供了將原始碼轉化為目的碼的工具。更進一步理解，vue內建的編譯器實現了將 .vue 檔案轉換編譯為可執行javascript指令碼的功能。
3.1.1 Runtime + Compiler
一個完整的vue版本是包含編譯器的，我們可以使用 template 進行模板編寫。編譯器會自動將模板編譯成 render 函式。
// 需要編譯器的版本
new Vue({
template: '<div>{{ hi }}</div>'
})
複製程式碼
3.1.2 Runtime Only
而對於一個不包含編譯器的 runtime-only 版本，需要傳遞一個編譯好的 render 函式，如下所示：
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
複製程式碼
很明顯，編譯過程對效能有一定的損耗，並且由於加入了編譯過程的程式碼，vue程式碼體積也更加龐大，所以我們可以藉助webpack的vue-loader工具進行編譯，將編譯階段從vue的構建中剝離出來，這樣既優化了效能，也縮小了體積。
3.2 掛載的基本思路
vue掛載的流程是比較複雜的，我們通過流程圖理清基本的實現思路。
如果用一句話概括掛載的過程，可以描述為掛載元件，將渲染函式生成虛擬DOM，更新檢視時，將虛擬DOM渲染成為真正的DOM。
詳細的過程是：首先確定掛載的DOM元素，且必須保證該元素不能為 html，body 這類跟節點。判斷選項中是否有 render 這個屬性(如果不在執行時編譯，則在選項初始化時需要傳遞 render 渲染函式)。當有 render 這個屬性時，預設我們使用的是 runtime-only 的版本，從而跳過模板編譯階段，呼叫真正的掛載函式 $mount 。另一方面，當我們傳遞是 template 模板時(即在不使用外接編譯器的情況下，我們將使用 runtime+compile 的版本)，Vue原始碼將首先進入編譯階段。該階段的核心是兩步，一個是把模板解析成抽象的語法樹，也就是我們常聽到的 AST ，第二個是根據給定的AST生成目標平臺所需的程式碼，在瀏覽器端是前面提到的 render 函式。完成模板編譯後，同樣會進入 $mount 掛載階段。真正的掛載過程，執行的是 mountComponent 方法，該函式的核心是例項化一個渲染 watcher ,具體 watcher 的內容，另外放章節討論。我們只要知道渲染 watcher 的作用，一個是初始化的時候會執行回撥函式，另一個是當 vm 例項中監測的資料發生變化的時候執行回撥函式。而這個回撥函式就是 updateComponent ，這個方法會通過 vm._render 生成虛擬 DOM ，並最終通過 vm._update 將虛擬 DOM 轉化為真正的 DOM 。
往下，我們從程式碼的角度出發，瞭解一下掛載的實現思路，下面只提取mount骨架程式碼說明。
// 內部真正實現掛載的方法
Vue.prototype.$mount = function (el, hydrating) {
el = el && inBrowser ? query(el) : undefined;
// 呼叫mountComponent方法掛載
return mountComponent(this, el, hydrating)
};
// 快取了原型上的 $mount 方法
var mount = Vue.prototype.$mount;
// 重新定義$mount,為包含編譯器和不包含編譯器的版本提供不同封裝，最終呼叫的是快取原型上的$mount方法
Vue.prototype.$mount = function (el, hydrating) {
// 獲取掛載元素
el = el && query(el);
// 掛載元素不能為跟節點
if (el === document.body || el === document.documentElement) {
warn(
"Do not mount Vue to <html> or <body> - mount to normal elements instead."
);
return this
}
var options = this.$options;
// 需要編譯 or 不需要編譯
if (!options.render) {
···
// 使用內部編譯器編譯模板
}
// 最終呼叫快取的$mount方法
return mount.call(this, el, hydrating)
}
// mountComponent方法思路
function mountComponent(vm, el, hydrating) {
// 定義updateComponent方法，在watch回撥時呼叫。
updateComponent = function () {
// render函式渲染成虛擬DOM， 虛擬DOM渲染成真實的DOM
vm._update(vm._render(), hydrating);
};
// 例項化渲染watcher
new Watcher(vm, updateComponent, noop, {})
}
複製程式碼
3.3 編譯過程 - 模板編譯成 render 函式
通過文章前半段的學習，我們對Vue的掛載流程有了一個初略的認識。接下來將先從模板編譯的過程展開。閱讀原始碼時發現，模板的編譯過程是相當複雜的，要在短篇幅內將整個編譯的過程講開是不切實際的，因此這節剩餘內容只會對實現思路做簡單的介紹。
3.3.1 template的三種寫法
template模板的編寫有三種方式，分別是：
// 1. 熟悉的字串模板
var vm = new Vue({
el: '#app',
template: '<div>模板字串</div>'
})
// 2. 選擇符匹配元素的 innerHTML模板
<div id="app">
<div>test1</div>
<script type="x-template" id="test">
<p>test</p>
</script>
</div>
var vm = new Vue({
el: '#app',
template: '#test'
})
// 3. dom元素匹配元素的innerHTML模板
<div id="app">
<div>test1</div>
<span id="test"><div class="test2">test2</div></span>
</div>
var vm = new Vue({
el: '#app',
template: document.querySelector('#test')
})
複製程式碼
三種寫法對應程式碼的三個不同分支。
var template = options.template;
if (template) {
// 針對字串模板和選擇符匹配模板
if (typeof template === 'string') {
// 選擇符匹配模板，以'#'為字首的選擇器
if (template.charAt(0) === '#') {
// 獲取匹配元素的innerHTML
template = idToTemplate(template);
/* istanbul ignore if */
if (!template) {
warn(
("Template element not found or is empty: " + (options.template)),
this
);
}
}
// 針對dom元素匹配
} else if (template.nodeType) {
// 獲取匹配元素的innerHTML
template = template.innerHTML;
} else {
// 其他型別則判定為非法傳入
{
warn('invalid template option:' + template, this);
}
return this
}
} else if (el) {
// 如果沒有傳入template模板，則預設以el元素所屬的根節點作為基礎模板
template = getOuterHTML(el);
}
複製程式碼
其中X-Template模板的方式一般用於模板特別大的 demo 或極小型的應用，官方不建議在其他情形下使用，因為這會將模板和元件的其它定義分離開。
3.3.2 流程圖解
vue原始碼中編譯流程程式碼比較繞，涉及的函式處理邏輯比較多，實現流程中巧妙的運用了偏函式的技巧將配置項處理和編譯核心邏輯抽取出來，為了理解這個設計思路，我畫了一個邏輯圖幫助理解。
3.3.3 邏輯解析
即便有流程圖，編譯邏輯理解起來依然比較晦澀，接下來，結合程式碼分析每個環節的執行過程。
var ref = compileToFunctions(template, {
outputSourceRange: "development" !== 'production',
shouldDecodeNewlines: shouldDecodeNewlines,
shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this);
// 將compileToFunction方法暴露給Vue作為靜態方法存在
Vue.compile = compileToFunctions;
複製程式碼
這是編譯的入口，也是Vue對外暴露的編譯方法。 compileToFunctions 需要傳遞三個引數： template 模板，編譯配置選項以及Vue例項。我們先大致瞭解一下配置中的幾個預設選項
- 1.
delimiters該選項可以改變純文字插入分隔符，當不傳遞值時，vue預設的分隔符為{{}}，使用者可通過該選項修改 - 2.
comments當設為true時，將會保留且渲染模板中的HTML註釋。預設行為是捨棄它們。
接著一步步尋找compileToFunctions根源
var createCompiler = createCompilerCreator(function baseCompile (template,options) {
//把模板解析成抽象的語法樹
var ast = parse(template.trim(), options);
// 配置中有程式碼優化選項則會對Ast語法樹進行優化
if (options.optimize !== false) {
optimize(ast, options);
}
var code = generate(ast, options);
return {
ast: ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
});
複製程式碼
createCompilerCreator 角色定位為建立編譯器的建立者。他傳遞了一個基礎的編譯器 baseCompile 作為引數， baseCompile 是真正執行編譯功能的地方，他傳遞template模板和基礎的配置選項作為引數。實現的功能有兩個
- 1.把模板解析成抽象的語法樹，簡稱
AST，程式碼中對應parse部分 - 2.可選：優化
AST語法樹，執行optimize方法 - 3.根據不同平臺將
AST語法樹生成需要的程式碼，對應的generate函式
具體看看 createCompilerCreator 的實現方式。
function createCompilerCreator (baseCompile) {
return function createCompiler (baseOptions) {
// 內部定義compile方法
function compile (template, options) {
···
// 將剔除空格後的模板以及合併選項後的配置作為引數傳遞給baseCompile方法,其中finalOptions為baseOptions和使用者options的合併
var compiled = baseCompile(template.trim(), finalOptions);
{
detectErrors(compiled.ast, warn);
}
compiled.errors = errors;
compiled.tips = tips;
return compiled
}
return {
compile: compile,
compileToFunctions: createCompileToFunctionFn(compile)
}
}
}
複製程式碼
createCompilerCreator 函式只有一個作用，利用偏函式將 baseCompile 基礎編譯方法快取，並返回一個編譯器函式，該函式內部定義了真正執行編譯的 compile 方法，並最終將 compile 和 compileToFunctons 作為兩個物件屬性返回，這也是 compileToFunctions 的來源。而內部 compile 的作用，是為了將基礎的配置 baseOptions 和使用者自定義的配置 options 進行合併，( baseOptions 是跟外部平臺相關的配置)，最終返回合併配置後的 baseCompile 編譯方法。
compileToFunctions 來源於 createCompileToFunctionFn 函式的返回值，該函式會將編譯的方法 compile 作為引數傳入。
function createCompileToFunctionFn (compile) {
var cache = Object.create(null);
return function compileToFunctions (template,options,vm) {
options = extend({}, options);
···
// 快取的作用：避免重複編譯同個模板造成效能的浪費
if (cache[key]) {
return cache[key]
}
// 執行編譯方法
var compiled = compile(template, options);
···
// turn code into functions
var res = {};
var fnGenErrors = [];
// 編譯出的函式體字串作為引數傳遞給createFunction,返回最終的render函式
res.render = createFunction(compiled.render, fnGenErrors);
// 渲染優化相關
res.staticRenderFns = compiled.staticRenderFns.map(function (code) {
return createFunction(code, fnGenErrors)
});
···
return (cache[key] = res)
}
}
複製程式碼
最終，我們找到了 compileToFunctions 真正的執行過程 var compiled = compile(template, options); ,並將編譯後的函式體字串通過 creatFunction 轉化為 render 函式返回。
function createFunction (code, errors) {
try {
return new Function(code)
} catch (err) {
errors.push({ err: err, code: code });
return noop
}
}
複製程式碼
其中函式體字串類似於 "with(this){return _m(0)}" ,最終的render渲染函式為 function(){with(this){return _m(0)}}
至此，Vue中關於編譯過程的思路也梳理清楚了，編譯邏輯之所以繞，主要是因為Vue在不同平臺有不同的編譯過程，而每個編譯過程的 baseOptions 選項會有所不同，同時在同一個平臺下又不希望每次編譯時傳入相同的 baseOptions 引數，因此在 createCompilerCreator 初始化編譯器時便傳入引數，並利用偏函式將配置進行快取。同時剝離出編譯相關的合併配置，這些都是Vue在編譯這塊非常巧妙的設計。