【Vue原理】Compile - 白話版

dingding199389 發布于2019-08-26 10:40 / 996人閱讀

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

寫文章不容易，點個贊唄兄弟  


專注 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: undefined

        text: "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 的文章去記錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106566.html

【Vue原理】Compile - 源碼版之 Parse 標簽解析

摘要：當字符串開頭是時，可以匹配匹配尾標簽。從結尾，找到所在位置批量閉合。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Compile - 源碼版之標簽解析...

loostudy 2019-08-26 10:41 評論0 收藏0
【Vue原理】Compile - 源碼版之 Parse 主要流程

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Compile - 源碼版之 Parse 主要流程本文難度較繁瑣，需要耐心觀看，如果你對 compile 源碼暫時...

Forest10 2019-08-26 10:41 評論0 收藏0
【Vue原理】Compile - 源碼版之從新建實例到 compile結束的主要流程

摘要：頁面這個實例，按理就需要解析兩次，但是有緩存之后就不會理清思路也就是說，其實內核就是不過是經過了兩波包裝的第一波包裝在中的內部函數中內部函數的作用是合并公共和自定義，但是相關代碼已經省略，另一個就是執行第二波包裝在中，目的是進行緩存寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 ...

CODING 2019-08-26 10:40 評論0 收藏0
【Vue原理】Compile - 源碼版之 generate 節點拼接

摘要：還原的難度就在于變成模板了，因為其他的什么等是原封不動的哈哈，可是直接照抄最后鑒于本人能力有限，難免會有疏漏錯誤的地方，請大家多多包涵，如果有任何描述不當的地方，歡迎后臺聯系本人，有重謝寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版...

macg0406 2019-08-26 10:44 評論0 收藏0
【Vue原理】Compile - 源碼版之 generate 節點數據拼接

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之節點數據拼接上一篇我們寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究...

fizz 2019-08-26 10:44 評論0 收藏0