最近小組有個(gè)關(guān)于vue源碼分析的分享會，提前準(zhǔn)備一下…
前言：
Vue有兩個(gè)版本：Runtime + Compiler 、 Runtime only ，前者是包含編譯代碼的版本，后者不包含編譯代碼，編譯過程需要借助webpack的vue-loader，接下來分析的是Runtime + Compiler版本，編譯過程感覺挺復(fù)雜的，所以下邊只是大概分析一下整個(gè)流程，源碼理解直接寫在源碼中。

模板的編譯

之前分析Virtual DOM的時(shí)候我們分析過模板到真實(shí) DOM 渲染的過程，中間有一個(gè)環(huán)節(jié)把模板編譯成render函數(shù)，這個(gè)過程稱作編譯。

（1）編譯入口追蹤

編譯入口在分析virtual dom的時(shí)候已經(jīng)提及過，位于src/platforms/web/entry-runtime-with-compiler.js下的$mount方法(紅框部分):

可以看到compileToFunctions方法將模板編譯成了render以及staticRenderFns函數(shù)，通過對象的解構(gòu)賦值獲取結(jié)果并賦值給options。

compileToFunctions在 src/platforms/web/compiler/index.js中定義，如下：

發(fā)現(xiàn)這是一個(gè)賦值的過程，值由createCompiler產(chǎn)生，createCompiler方法在 src/compiler/index.js 中定義，如下：

這個(gè)方法是createCompilerCreator的返回值，createCompilerCreator中傳入的參數(shù)是一個(gè)方法，在此暫時(shí)不看參數(shù)方法里邊的內(nèi)容，因?yàn)檫@里只是一個(gè)調(diào)用，并沒有執(zhí)行什么。先看看createCompilerCreator的定義，它的定義在src/compiler/create-compiler.js中，如下：

createCompilerCreator返回一個(gè) createCompiler 的函數(shù)，該函數(shù)返回的是一個(gè)對象，包括 compile 和compileToFunctions ， compileToFunctions對應(yīng)的就是$mount方法中調(diào)用的compileToFunctions 方法，它是 createCompileToFunctionFn 方法的返回值，我們接下來看一下 createCompileToFunctionFn 方法，它的定義在 src/compiler/to-function/js 中，這個(gè)函數(shù)便是compileToFunctions的最終定義，如下：

compileToFunctions中編譯的核心是compile的調(diào)用，compile是通過參數(shù)的方式傳入的，也就是createCompilerCreator中定義的compile，現(xiàn)在我們返回去看compile是什么，之前的圖折疊了，現(xiàn)在展開如下：

compile前部分代碼都是在處理配置參數(shù)，實(shí)際上的編譯過程只有代碼中紅框部分，也就是調(diào)用baseCompile方法，這個(gè)方法時(shí)調(diào)用createCompilerCreator時(shí)通過參數(shù)的方式傳入的，也就是之前介紹到的當(dāng)時(shí)說暫時(shí)不用看的代碼，重新上一次圖：

編譯入口追蹤到這里告一段落（vue項(xiàng)目支持多個(gè)平臺，不同平臺配置不一樣，所以入口繞了很多個(gè)圈）。可以看到最終主要步驟有三步，一步是通過parse生成ast樹，一步是optimize，看英文意思及傳入?yún)?shù)應(yīng)該是對ast樹進(jìn)行優(yōu)化的一個(gè)過程，一步是調(diào)用generate生成code，接下來看看這幾個(gè)步驟都干了什么。

(2) parse

編譯過程首先就是對模板做解析，生成 AST語法樹，我們可以在parse后debugger一下，看看AST語法樹的模樣。

新建一個(gè)vue demo，在main.js做如下配置：

然后再源碼中parse后打個(gè)斷點(diǎn)，或者打印一下：

可以看到，控制臺輸入了以下內(nèi)容，這便是ast的結(jié)構(gòu)：

至此ast的結(jié)構(gòu)我們了解了，但ast是怎么生成的呢？接下來我們看看parse是什么。parse的定義位于src/compiler/parser/index.js中。
這個(gè)過程很復(fù)雜，概括地說就是把template模板字符串轉(zhuǎn)換成AST樹，它是一種用JavaScript對象的形式來描述整個(gè)模板。整個(gè)parse的過程是利用正則表達(dá)式順序解析模板，當(dāng)解析到開始標(biāo)簽、閉合標(biāo)簽、文本的時(shí)候都會分別執(zhí)行對應(yīng)的回調(diào)函數(shù)，最終達(dá)到構(gòu)造AST樹的目的。
這塊內(nèi)容很多，挑幾個(gè)點(diǎn)講一下：

①：解析標(biāo)簽

解析HTML是通過調(diào)用parseHML方法完成的，它的定義位于src/compiler/parser/html-parser
調(diào)用：

定義：

這個(gè)方法也是比較復(fù)雜，整體來說就是循環(huán)解析template ，用頂部預(yù)先定義好的一堆正則表達(dá)式做正則匹配，處理開始標(biāo)簽和結(jié)束標(biāo)簽，對于不同情況分別進(jìn)行不同的處理，直到解析完畢。

比較關(guān)鍵的一個(gè)點(diǎn)事在匹配的過程中會利用 advance 函數(shù)不斷前進(jìn)整個(gè)模板字符串，直到字符串末尾。

舉個(gè)例子：

假如模板本來是這個(gè)樣子的，可以理解為一個(gè)隊(duì)列，目前隊(duì)列的索引為0：

通過調(diào)用advance(4)后，通過html.substring(4)，隊(duì)列的索引就變成了4，當(dāng)前待解析模板就變成了如下：

②：解析文本、表達(dá)式

除了處理開始標(biāo)簽和結(jié)束標(biāo)簽，還需要處理文本，通過parseText實(shí)現(xiàn)，源碼位于src/compiler/parser/text-parsre.js

回頭看看之前打印出來的ast，可以看到打上標(biāo)記的表達(dá)式：

③：解析指令，以v-for為例

v-for指令解析的入口是processFor方法，該方法定義位于src/compiler/parser/index.js，此方法依賴parseFor以及extend方法，共同完成v-for的解析。

大概思路：通過正則匹配v-for，匹配到了就調(diào)用parseFor方法，parseFor方法位于同文件中：

這個(gè)方法也是通過正則匹配，分別匹配出不同的內(nèi)容，比如’v-for="(item, index) in data"’，匹配出來的res.for是data，res.alias是item，res.iterator是index，隨后返回解析出來的 結(jié)果，傳給processFor中的res常量res，接著調(diào)用extend方法完成解析，extend方法的定義位于src/shared/util.js中，如下：

其實(shí)extend只是一個(gè)循環(huán)，把之前解析出來的屬性循環(huán)出來并掛載到傳入的ast對象上。（更新于2019.02.25 ）
更多指令的解析有興趣可以自行研究一下~~

總結(jié)

以上是生活随笔為你收集整理的[Vue源码分析] 模板的编译的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。