作者：彭凱

勿噴！ 快樂與知識并存榜聂！ 嘻嘻搞疗！

初始化及掛載

在new? vue() 之后。 Vue 會調(diào)用 _init 函數(shù)進行初始化 也就是這里的init 過程须肆，它會初始化生命周期匿乃，事件，props豌汇，methods,data,compited與watch等幢炸。其中最重要的是通過Object.defineProperty 設(shè)置setter 與getter 函數(shù) ，用來實現(xiàn)[響應(yīng)式]以及【依賴收集】

初始化之后 調(diào)用￥mount會掛載組件? 如果運行時編譯 即不存在render function 但是存在 template 的情況拒贱，需要進行【編譯】步驟

編譯

compile編譯可以分成 parse (?解析) optimize（優(yōu)化） 與generate （生成） 三個階段? 最終到(渲染)render function宛徊。

parse?

? ? ? ? 會用正則等方式解析 template 模板中的指令，class style 等數(shù)據(jù)? 柜思，形成AST

? ? 拓展：

?什么是AST在Vue的mount過程中岩调，template會被編譯成AST語法樹巷燥，AST是指抽象語法樹（abstract syntax tree或者縮寫為AST）赡盘，或者語法樹（syntax tree），是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式缰揪。Vue源碼中虛擬DOM構(gòu)建經(jīng)歷 template編譯成AST語法樹 -> 再轉(zhuǎn)換為render函數(shù) 最終返回一個VNode(VNode就是Vue的虛擬DOM節(jié)點)?

optimize?

? ? ? ? ? ? optimize的主要作用是標記static 的節(jié)點陨享，在編譯過程有某處的優(yōu)化，而且在更新頁面是會有path的過程

有diff的算法? 減少比較? 優(yōu)化patch的性能

generate是最終將抽象語法樹（abstract syntax tree或者縮寫為AST）轉(zhuǎn)化為render function 的過程?

當我們有了這個虛擬的樹之后钝腺，再交給一個patch函數(shù)抛姑，負責(zé)把這些虛擬DOM真正施加到真實的DOM上 。在這個過程中艳狐，Vue有自身的響應(yīng)式系統(tǒng)來偵測在渲染過程中所依賴到的數(shù)據(jù)來源定硝。在渲染過程中，偵測到的數(shù)據(jù)來源之后毫目，之后就可以精確感知數(shù)據(jù)源的變動蔬啡。到時候就可以根據(jù)需要重新進行渲染诲侮。當重新進行渲染之后，會生成一個新的樹箱蟆，將新樹與舊樹進行對比沟绪，就可以最終得出應(yīng)施加到真實DOM上的改動。最后再通過patch函數(shù)施加改動空猜。

?vue的依賴追蹤通過ES5的?Object.defineProperty?方法實現(xiàn)绽慈。比如，我們給它一個原生對象辈毯，Vue會遍歷這個數(shù)據(jù)對象的屬性坝疼，然后進行屬性轉(zhuǎn)換。每一個屬性會被轉(zhuǎn)換為一個?getter?和一個?setter漓摩。同時每個組件會有一個對應(yīng)的?watcher?對象裙士，這個對象的職責(zé)就是在當前組件被渲染的時候，記錄數(shù)據(jù)上面的哪些屬性被用到了管毙。

經(jīng)歷：

????????當某個數(shù)據(jù)屬性被用到時腿椎，觸發(fā)?getter，這個屬性就會被作為依賴被?watcher?記錄下來夭咬。

????????整個函數(shù)被渲染完的時候啃炸，每一個被用到的數(shù)據(jù)屬性都會被記錄。

????????相應(yīng)的數(shù)據(jù)變動時卓舵，例如給它一個新的值南用，就會觸發(fā)?setter，通知數(shù)據(jù)對象對應(yīng)數(shù)據(jù)有變化掏湾。

????????此時會通知對應(yīng)的組件裹虫，其數(shù)據(jù)依賴有所改動，需要重新渲染融击。

????????對應(yīng)的組件再次調(diào)動渲染函數(shù)筑公，生成?Virtual DOM，實現(xiàn)?DOM?更新