摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理白話版終于到了要講白話的時(shí)候了

寫文章不容易，點(diǎn)個(gè)贊唄兄弟  


專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

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

【Vue原理】Compile - 白話版

終于到了要講 compile 白話的時(shí)候了，大家準(zhǔn)備好了嗎，白話版肯定不會(huì)很復(fù)雜啦，源碼版就不一定了。。。

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

都快堅(jiān)持不下來了，我算了算， compile 的源碼版，我好像快寫了一個(gè)多月？？？

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

好吧，現(xiàn)在開始我們的正文

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

就是 parse，optimize，generate

雖然分為三塊，但是要明確一點(diǎn)

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

經(jīng)過 compile 之后，就會(huì)生成下面的 render

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

而 render 的作用，也是為了生成跟模板節(jié)點(diǎn)一一對應(yīng)的 Vnode

{    

    tag: "div",    

    children:[{        

        tag: "span",        

        text: undefined

    },{        

        tag: undefined

        text: "111"
    }]
}

下面我們就來一個(gè)個(gè)看渲染三巨頭

這是 compile 的第一個(gè)步驟

接收 template 原始模板，按照模板的節(jié)點(diǎn) 和數(shù)據(jù) 生成對應(yīng)的 ast

生成的 ast 是這樣，所有模板中出現(xiàn)的數(shù)據(jù)，你都可以在 ast 中找到

{    

    tag: "div",    

    attrsMap: {test: "2"},    

    children:[{        

        tag: "span",        

        children: [],        

        attrsMap: {name: "1"}

    }]
}

ast 是什么？個(gè)人簡單理解的話

以數(shù)據(jù)的形式去描述一個(gè)東西的所有的特征吧，說錯(cuò)別打我

比如說ast 描述我

{    

    name: "神仙朱",    

    sex: 1,

    desc: "一個(gè)靚仔"

}

具體可以查一下，相關(guān)內(nèi)容挺多的

另外，這里不會(huì)講細(xì)節(jié)，parse 是怎么生成 ast 的，因?yàn)樯婕昂芏嘣创a，放在源碼版了

這是 compile 的第二步

遍歷遞歸每一個(gè)ast節(jié)點(diǎn)，標(biāo)記靜態(tài)的節(jié)點(diǎn)（沒有綁定任何動(dòng)態(tài)數(shù)據(jù)），

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

從而達(dá)到性能優(yōu)化的目的

span 和 b 就是靜態(tài)節(jié)點(diǎn)，在 optimize 處理中，就會(huì)給他們添加 static 判斷是否是靜態(tài)節(jié)點(diǎn)

{    

    static: false,    

    staticRoot: false,    

    tag: "div",    

    children: [{        

        staticRoot: true,        

        tag: "span",        

        children: [{            

            static: true,            

            tag: "b"

        }]
    },{        

        static: false,        

        text: "{{a}}"

    }]
}

而你也看到一個(gè)屬性，staticRoot，這個(gè)是表示這個(gè)節(jié)點(diǎn)是否是靜態(tài)根節(jié)點(diǎn)的意思

用來標(biāo)記 某部分靜態(tài)節(jié)點(diǎn) 最大的祖宗節(jié)點(diǎn)，后面更新的時(shí)候，只要碰到這個(gè)屬性，就知道他的所有子孫節(jié)點(diǎn)都是靜態(tài)節(jié)點(diǎn)了，而不需要每個(gè)子孫節(jié)點(diǎn)都要判斷一次浪費(fèi)時(shí)間

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

這是 compile 的第三步

把前兩步生成完善的 ast 組裝成 render 字符串（這個(gè) render 變成函數(shù)后是可執(zhí)行的函數(shù)，不過現(xiàn)在是字符串的形態(tài)，后面會(huì)轉(zhuǎn)成函數(shù)）

經(jīng)過前兩步變成 ast

{    

    static: false,    

    staticRoot: false,    

    tag: "div",    

    children: [{        

        static: false,        

        staticRoot: false,        

        tag: "span",        

        children: [{            

            static: false,            

            text: "{}"

        }]
    },{        

        static: false,        

        text: "{{a}}"

    }]
}

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

這個(gè)過程中，字符串會(huì)被一點(diǎn)一點(diǎn)拼接完成，比如上面的 ast 拼接結(jié)果就是下面這樣

_c 是生成節(jié)點(diǎn)對應(yīng)的 Vnode 的一個(gè)函數(shù)

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

1、一開始接收到 ast，處理最外層 ast 這個(gè)點(diǎn)，是 div，于是拼接得到字符串

code  = ` _c("div", [  `

2、遍歷 div 子節(jié)點(diǎn)，遇到 span，拼接在 div 的子節(jié)點(diǎn)數(shù)組中

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

3、開始處理 span 的子節(jié)點(diǎn) b，放進(jìn) span 的 子節(jié)點(diǎn)數(shù)組中

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

4、span 子節(jié)點(diǎn)處理完，閉合 span 的 子節(jié)點(diǎn)數(shù)組

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

5、繼續(xù)處理 span 同級 的子節(jié)點(diǎn)，是個(gè)文本節(jié)點(diǎn)，但是是動(dòng)態(tài)值，變量是 a

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

6、所有子節(jié)點(diǎn)都處理完畢，閉合 div 的 子節(jié)點(diǎn)數(shù)組

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

前面兩步把 template 解析生成了 render 字符串，但是需要執(zhí)行的話，還是需要轉(zhuǎn)換成函數(shù)的

怎么轉(zhuǎn)呢？就是下面這樣

render = new Function(render)

然后 render 保存在實(shí)例上，具體位置是

vm.$options.render

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

而關(guān)于 render 的內(nèi)容，比如說 render 中出現(xiàn)的各種函數(shù)是什么，會(huì)專門放在 render 的文章去記錄