有很多小伙伴都是通過(guò)Vue js視頻教程來(lái)學(xué)習(xí)的，Vue.js 的源碼使用了Flow做靜態(tài)類型檢查，之所以選擇Flow ， 是因?yàn)?Babel和 ESlint 都有對(duì)應(yīng)的Flow插件支持語(yǔ)法。

Vue的初始化過(guò)程

Vue的本質(zhì)上就是一個(gè)用Function實(shí)現(xiàn)的Class類，然后它的原型prototypey以及它本身都擴(kuò)展了一系列的方法和屬性。

在 import Vue 的時(shí)候，會(huì)執(zhí)行core 文件夾中的 index.js , 通過(guò) instance文件夾中的index.js文件給Vue的prototype上擴(kuò)展一些方法;通過(guò) initGlobalAPI 方法擴(kuò)展 nextTick 、set、del 等全局靜態(tài)方法。

new Vue的時(shí)候，會(huì)調(diào)用 this._init 方法， 通過(guò)該方法，合并配置、初始化生命周期、初始化事件中心、初始化渲染、初始化data 、props、computed、watcher 等等。初始化最后，檢測(cè)到如果有el 屬性，則調(diào)用 vm.$mount 方法掛載vm, 把模板渲染成最終的DOM 。

$mount 方法 先對(duì) el 做了限制 ， Vue 不能掛載在 body 、html 這樣的根節(jié)點(diǎn)上。Vue組件的最后渲染都需要render方法，如果沒有定義render 方法，則會(huì)把 el 或者 template 字符串轉(zhuǎn)換成 render 方法，這個(gè)過(guò)程是Vue的一個(gè)在線編譯過(guò)程，它是通過(guò) compileToFunctions 方法實(shí)現(xiàn)的。

$mount 方法支持傳入兩個(gè)參數(shù)，第一個(gè)是 el ，表示掛載的元素，可以是字符串，也可以是DOM對(duì)象，如果是字符串在瀏覽器環(huán)境下會(huì)調(diào)用 query 方法轉(zhuǎn)換成DOM對(duì)象;第二個(gè)參數(shù)是和服務(wù)端渲染相關(guān)。

$mount 方法實(shí)際上調(diào)用的是 mountComponent 方法，mountComponent 方法的核心是先調(diào)用 vm._render 方法生成虛擬DOM , 再實(shí)例化一個(gè)渲染 Watcher (觀察者) ， 在它的回調(diào)函數(shù)中會(huì)調(diào)用 updateComponent 方法，最終調(diào)用vm._update更新DOM 。

Watcher 在這里的作用，一是初始化的時(shí)候會(huì)執(zhí)行回調(diào)函數(shù)，二是當(dāng) vm實(shí)例中的監(jiān)測(cè)的數(shù)據(jù)發(fā)生變化的時(shí)候執(zhí)行回調(diào)函數(shù)。函數(shù)最后判斷為根節(jié)點(diǎn)的時(shí)候設(shè)置 vm._isMounted 為 true , 表示這個(gè)實(shí)例已經(jīng)掛載了，同時(shí)執(zhí)行 mounted 鉤子函數(shù)。 vm.$vnode 表示 Vue實(shí)例的父虛擬 Node , 為 null 時(shí)表示當(dāng)前是 根Vue 的實(shí)例。

vm._render 方法最終是通過(guò)執(zhí)行 createElement 方法并返回 vnode , 它是一個(gè)虛擬 node ，接下來(lái)通過(guò) vm._update 方法渲染成一個(gè)真實(shí)的DOM并渲染出來(lái)

vm._update 被調(diào)用的時(shí)機(jī)有兩個(gè)，一是首次渲染，二是數(shù)據(jù)更新的時(shí)候。vm._update的核心是調(diào)用 vm._patch_ 方法，這個(gè)方法在web 和 weex 平臺(tái)上的定義是不一樣的。 該方法內(nèi)部 調(diào)用 insert 方法把DOM插入父節(jié)點(diǎn)中。

patch的整體流程：createComponent -> 子組件初始化 -> 子組件render -> 子組件patch 嵌套組件的插入順序是先子后父

Vue各組件間合并配置過(guò)程：對(duì)于options的合并方式有2種，子組件初始化過(guò)程通過(guò) initInternalComponent 方式要比外部初始化Vue通過(guò) mergeOptions 的過(guò)程要快，合并完的結(jié)果保留在 vm.$options 中。

源碼中最終執(zhí)行生命周期的函數(shù)都是調(diào)用 callHook 方法

如果大家對(duì)此比較感興趣，想了解更多相關(guān)知識(shí)，可以關(guān)注一下動(dòng)力節(jié)點(diǎn)的Java視頻教程，里面的課程內(nèi)容由淺到深，通俗易懂，適合小白學(xué)習(xí)，希望對(duì)大家能夠有所幫助。