---

前言

Runtime Only 和 Runtime+Compiler的區(qū)別
通常我們利用 vue-cli 去初始化我們的 Vue.js 項(xiàng)目的時(shí)候會(huì)詢(xún)問(wèn)我們用Runtime Only 版本的還是 Runtime+Compiler 版本。
Runtime Only：我們?cè)谑褂?Runtime Only 版本的 Vue.js 的時(shí)候，通常需要借助如 webpack的 vue-loader 工具把 .vue 文件編譯成 JavaScript，因?yàn)槭窃诰幾g階段做的，所以它只包含運(yùn)行時(shí)的 Vue.js 代碼，因此代碼體積也會(huì)更輕量。
Runtime+Compiler：我們?nèi)绻麤](méi)有對(duì)代碼做預(yù)編譯，但又使用了 Vue 的 template 屬性并傳入一個(gè)字符串，則需要在客戶(hù)端編譯模板。如下所示：

// 需要編譯器的版本
new Vue({
template: '<div>{{ hi }}</div>'
})
// 這種情況不需要
new Vue({render (h) {return h('div', this.hi)
}

因?yàn)樵?Vue.js 2.0 中，最終渲染都是通過(guò) render 函數(shù)，如果寫(xiě) template 屬性，則需要編譯成 render 函數(shù)，那么這個(gè)編譯過(guò)程會(huì)發(fā)生運(yùn)行時(shí)，所以需要帶有編譯器的版本。
很顯然，這個(gè)編譯過(guò)程對(duì)性能會(huì)有一定損耗，所以通常我們更推薦使用Runtime-Only 的 Vue.js。

---

一、使用Runtime+Compiler解析$mount的原因

Vue中我們通過(guò) $mount 方法去掛載vm，而 $mount 方法在多個(gè)文件中都有定義。如源碼 src\platforms\web\runtime\index.ts、 src\platforms\web\runtime-with-compiler.ts 等文件。由于使用純前端的方式分析源碼，所以我這里分析 Compiler 版本的 $mount，有利于對(duì)原理深入的理解。

src\platforms\web\runtime\index.ts的方法較為簡(jiǎn)單，如下圖

二、$mount 解析的詳細(xì)過(guò)程

1.解析掛載的#app執(zhí)行了vm.$mount

2. 通過(guò)$mount方法執(zhí)行以下文件的mount方法

路徑：src\platforms\web\runtime-with-compiler.ts

3. 執(zhí)行util工具文件夾中的query方法

路徑：src\platforms\web\util\index.ts
也就是main.js 中el: ‘#app’ 傳入的話(huà)，就會(huì)執(zhí)行1.1獲取對(duì)應(yīng)的元素

4. 執(zhí)行query方法后返回$mount方法判斷el是否是body

5. 判斷!options.render

（1）options.render是否為真

下一章節(jié)會(huì)詳細(xì)講解

（2）判斷是否使用了template

也就是使用Runtime Only 需要編譯的寫(xiě)法，這個(gè)在前言中詳細(xì)說(shuō)明了，可以返回頂部詳細(xì)看看。

// 使用了template配置的寫(xiě)法
import Vue from 'vue'
var app = new Vue({el: '#app',template: '<div>{{ message }}</div>',  // 使用了templatedata() {return {message: '我是一個(gè)雙向綁定的數(shù)據(jù)'}}
})

（3）判斷是否是el

如果是el，就執(zhí)行g(shù)etOutHtml方法，獲取main.js中el的id名的div元素

（4）返回的 mount 的方法

路徑：src\platforms\web\runtime\index.ts

6. 解析mountComponent方法

路徑 src\core\instance\lifecycle.ts
執(zhí)行updateComponent方法，通過(guò)Watcher根據(jù)數(shù)據(jù)更新執(zhí)行。感興趣可以查看Watcher里面的配置即可。

---

總結(jié)

這就是$mount 掛載的過(guò)程