寫文章不容易，點個贊唄兄弟 專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧 研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧

【Vue原理】Compile - 白話版

終于到了要講 compile 白話的時候了，大家準備好了嗎，白話版肯定不會很復雜啦，源碼版就不一定了。。。

源碼版我寫了9篇啊！每篇的篇幅都很長啊！！我都快寫奔潰了啊！！

都快堅持不下來了，我算了算， compile 的源碼版，我好像快寫了一個多月？？？

臥槽，竟然寫了這么久.....

好吧，現在開始我們的正文

---

Compile

compile 的內容非常多，大致分為三塊主要內容，我也稱他們是Vue的 渲染三巨頭

就是 parse，optimize，generate

雖然分為三塊，但是要明確一點

compile 的作用是解析模板，生成渲染模板的 render

比如這樣的模板

經過 compile 之后，就會生成下面的 render

_c('div', [_c('span'), _v(num)])

而 render 的作用，也是為了生成跟模板節點一一對應的 Vnode

{ tag: "div", children:[{ tag: "span", text: undefined},{ tag: undefinedtext: "111"}] }

下面我們就來一個個看渲染三巨頭

---

Parse

這是 compile 的第一個步驟

作用是

接收 template 原始模板，按照模板的節點 和數據 生成對應的 ast

比如這樣

生成的 ast 是這樣，所有模板中出現的數據，你都可以在 ast 中找到

{ tag: "div", attrsMap: {test: "2"}, children:[{ tag: "span", children: [], attrsMap: {name: "1"}}] }

ast 是什么？個人簡單理解的話

以數據的形式去描述一個東西的所有的特征吧，說錯別打我

比如說ast 描述我

{ name: "神仙朱", sex: 1,desc: "一個靚仔"}

具體可以查一下，相關內容挺多的

另外，這里不會講細節，parse 是怎么生成 ast 的，因為涉及很多源碼，放在源碼版了

---

Optimize

這是 compile 的第二步

作用是

遍歷遞歸每一個ast節點，標記靜態的節點（沒有綁定任何動態數據），

這樣就知道那部分不會變化，于是在頁面需要更新時，減少去比對這部分DOM

從而達到性能優化的目的

比如這個模板

span 和 b 就是靜態節點，在 optimize 處理中，就會給他們添加 static 判斷是否是靜態節點

{ static: false, staticRoot: false, tag: "div", children: [{ staticRoot: true, tag: "span", children: [{ static: true, tag: "b"}]},{ static: false, text: "{{a}}"}] }

而你也看到一個屬性，staticRoot，這個是表示這個節點是否是靜態根節點的意思

用來標記 某部分靜態節點 最大的祖宗節點，后面更新的時候，只要碰到這個屬性，就知道他的所有子孫節點都是靜態節點了，而不需要每個子孫節點都要判斷一次浪費時間

具體是怎么做的，感興趣的話歡迎看以后的源碼版

---

Generate

這是 compile 的第三步

作用是

把前兩步生成完善的 ast 組裝成 render 字符串（這個 render 變成函數后是可執行的函數，不過現在是字符串的形態，后面會轉成函數）

看個例子

經過前兩步變成 ast

{ static: false, staticRoot: false, tag: "div", children: [{ static: false, staticRoot: false, tag: "span", children: [{ static: false, text: "{{b}}"}]},{ static: false, text: "{{a}}"}] }

然后，generate 接收 ast，先處理最外層 ast，然后開始遞歸遍歷子節點，直到所有節點被處理完

這個過程中，字符串會被一點一點拼接完成，比如上面的 ast 拼接結果就是下面這樣

_c 是生成節點對應的 Vnode 的一個函數

` _c('div', [_c('span', [_v(b)]),_v(a) ]) `

簡單說一下拼接流程

1、一開始接收到 ast，處理最外層 ast 這個點，是 div，于是拼接得到字符串

code = ` _c('div', [ `

2、遍歷 div 子節點，遇到 span，拼接在 div 的子節點數組中

code = `_c('div', [ _c('span', [ `

3、開始處理 span 的子節點 b，放進 span 的 子節點數組中

code = ` _c('div', [ _c('span', [ _v(b) `

4、span 子節點處理完，閉合 span 的 子節點數組

code = ` _c('div', [ _c('span', [ _v(b) ] `

5、繼續處理 span 同級 的子節點，是個文本節點，但是是動態值，變量是 a

code = `_c('div', [ _c('span', [ _v(b) ] , _v(a) `

6、所有子節點都處理完畢，閉合 div 的 子節點數組

code = ` _c('div', [ _c('span', [ _v(b) ] , _v(a) )] `

---

render轉成函數

前面兩步把 template 解析生成了 render 字符串，但是需要執行的話，還是需要轉換成函數的

怎么轉呢？就是下面這樣

render = new Function(render)

然后 render 保存在實例上，具體位置是

vm.$options.render

至此，compile 所有的功能就完成了

而關于 render 的內容，比如說 render 中出現的各種函數是什么，會專門放在 render 的文章去記錄

總結

以上是生活随笔為你收集整理的vue 数值 拼接字符串_【Vue原理】Compile - 白话版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。