本博客將以斷點的形式帶大家瞭解一下，Vue在首次渲染的情況下經歷了哪些過程，順便對最近Vue2.6 源碼的學習，進行總結一下。
前期準備：
1. Vue2.6 源碼的 clone
2. 瀏覽器，我用的是 google
3. 瀏覽器內斷點
4. 下面流程圖爲全部過程，後續還需新增
一、前期準備詳細-內容
1. 首先將 Vue2.6 源碼 clone 下來, 我們可以看到下面的目錄，目錄介紹
2. 在 examples 文件下新建 examples/03-initVue/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 首次渲染的過程</title>
</head>
<body>
<div id="app">
<div>
<h1>Hello World</h1>
</div>
{{msg}}
</div>
</body>
<script src="../../dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
</html>
3. 在瀏覽器打開 index.html 文件
4. 在瀏覽器-> 鼠標右鍵 -> 檢查 -> Source內找下面文件進行斷點， 我們在這裏需要設置4個斷點的地方，順便在最右邊的地方，Watch中添加Vue的監聽
1. 第一個斷點：vue2.6/src/core/instance/index.js
2. 第二個斷點：vue2.6/src/core/index.js
3. 第三個斷點：vue2.6/src/platforms/web/runtime/index.js
4. 第四個斷點：vue2.6/src/platforms/web/entry-runtime-with-compiler.js
1. 第一個斷點：
1. 與平臺無關 ， [ ... ]Mixin 主要作用是給 Vue的原型上掛載實例成員
2. F10 執行initMixin() 方法，查看 Vue監聽的地方，Vue/prototype 下新增了 _init 這個實例
3. F10 執行stateMixin() 方法，查看 Vue監聽的地方，Vue/prototype 下新增了 $delect, $set, $watch, [ $data, $props 的初始化 ] , 並對 $data, $props 變爲響應式。
4. F10 執行eventsMixin() 方法，查看 Vue監聽的地方，Vue/prototype 下新增了 $emit, $off, $on, $once
5. F10 執行lifecycleMixin()方法，查看 Vue監聽的地方，Vue/prototype 下新增了 $destroy, $forceUpdate, _update
6. F10 執行renderMixin() 方法，查看 Vue監聽的地方，Vue/prototype 下新增了 $nextTick, _render，_o, _n, _s ....一些後續我們會需要到的js方法
2. 第二個斷點：
1. 與平臺無關，初始化Vue的靜態成員
2. F11 進入 initGlobelAPI方法， 則新增Vue的 delect, nextTick, observable, options, set, util, 這些靜態成員，在options 對象中新增 components ， directives， filters， _base這些屬性，
3. F10 進入 initUse 方法，新增Vue的use靜態成員
4. F10 進入 initMixin 方法，新增Vue的 mixin 靜態成員
5. F10 進入initExtend 方法，新增Vue的 extend 靜態成員
6. F10 進入initAssetRegisters(Vue) 方法，新增Vue 中新增了 components ， directives， filters 靜態成員，這個地方需要注意的是，這次綁定到了Vue上不是 Vue.options上
3. 第三個斷點
1. 與平臺有關
2. Vue.config.[.....] 主要是註冊平臺相關的方法，比如指令和組件
3. Vue.options.directives 中主要 新增 v-model, v-show 這兩個指令
4. Vue.options.components 中主要 新增了 Transition， TransitionGroup 這兩個組件
5. Vue.prototype._patch_ 在Vue原型上掛載_patch_方法 ，將虛擬Dom轉換爲真實Dom
6. Vue.prototype.$mount 主要是將 Dom的形式掛載到界面上，並將compileToFunction 返回的值 = Vue.compile
7. 進入 mountComponent 方法，重新獲取 el
4. 第四個斷點
1. 在打包編譯的階段，重寫$mount. 把模版編譯爲Render函數的方法
2. 新增compile方法，作用：手動把模版轉換成Render函數
總結：
Vue首次渲染主要做了兩大操作：
1. 初始化實例成員和靜態成員，這是跟平臺無關的
1. 實例成員中：實例相關內容，包括實例方法，事件，生命週期
2. 靜態成員中：添加了全局方法，也就是添加在Vue對象上的方法， 比如 Vue.use, Vue.extend, Vue,mixin， Vue.set等。
2. 初始化了組件，模版，指令，這是跟平臺有關的
1. 運行環境：需要處理的指令，組件，模塊，
2. 編譯環境：需要處理的指令，組件，模塊
3. 將模版轉換成 render函數
4. $mount 方法中，主要在 Dom渲染之前，觸發beforeMount方法，
3. 然後創建渲染Watcher，掛載beforeupdate生命週期的方法，
4. 調用mountComponent 方法，通過render 函數轉換虛擬Dom, 並將虛擬Dom，再轉換成真實Dom，顯示到界面， 觸發mounted方法。
這是我做的總結文檔，有需要的小夥伴，可以查看哦
https://pan.wps.cn/l/susnl0bXl8nP?f=130
[文檔] Vue 首次渲染的過程.pof