Vue 源碼解析 - $mount

上一節講的new Vue的時候，vue的構造函數會執行this._init()函數，最後執行vm.$mount(vm.$options.el)將實例掛載到dom上。能夠看出，vm.$mount爲vue render主要函數。頁面就會從 {{ message }}變爲 ’hello vue‘。主要渲染流程是el、template->render表達式->Vnode->DOM

接下來經過代碼來進一步分析

Vue是經過$mount實例方法去掛載

vm

，$mount 方法在多個文件中都有定義，如src/platform/web/entry-runtime-with-complier.js , src/platform/web/runtime/index.js src/platform/weex/runtime/index.js 由於$mount 這個方法的實現是和平臺、構建方式都相關的。接下來咱們分析運行時版本的$mount 實現，由於拋開 webpack 的 vue-loader，咱們在純前端瀏覽器環境分析 Vue 的工做原理 。

$mount函數在'src/platforms/web/entry-runtime-with-compiler'上被定義

在代碼中能夠看出，el能夠是字符串或者是Element，而且調用了query方法，這個方法在platfomrs/web/util/index.js上被定義

從query方法能夠看出，當query傳入的參數是字符串的話，會篩選出字符對應的dom節點，轉換成dom對象，而且判斷字符串不能是body或者html ，若是是的話，就會出現一個錯誤，防止被覆蓋。若是是element的話，就直接返回。

從上圖能夠看出，接下來會判斷是否有render函數以及template，若vue實例中沒有render，則將template編譯成render，就是說vue只認render函數。同時，由於template能夠寫成多種形式，由於el也會轉換成template（getOutHTML函數），再轉換成render。

在代碼的末尾定義了getOutHTML函數。

getOutHTML函數主要是得到el所對應的dom及其內容

最後調用mount完成渲染

其中mount方法在platform/runtime/index.js被定義

這些方法主要是作一些判斷，並執行mountComponent方法，mountComponent核心就是調用vm._render方法生成虛擬節點，再實例化一個Watcher，在它的回調函數中會調用updateComponent方法，最終調用vm._uppdate更新DOM。

再來看看mountComponent這個方法，在src/core/instance/lifecycle.js能夠看到這個方法

這個函數的主要邏輯是判斷是否有render函數，若是沒有這個函數，則執行createEmptyVNode，又判斷版本。接着就是判斷若是沒有template方法也沒有render方法，就會提示報錯。

接着就是定義updateComponent方法

從函數體大概能夠看出，該方法主要是完成渲染和更新。