Vue.js 程式碼實現
檢驗學習效果的最好方法就是自己造輪子。最近在學習Vue原始碼，寫了一個迷你版vue，實現資料響應式。從step1到step3.2，是開發步驟和實現思路，每一步都可以獨立執行。
程式碼地址：https://github.com/dora-zc/miniature-vue
目錄結構
.
├── README.md
├── step0
│ └── defineProperty_test.html
├── step1
│ ├── XVue.js
│ └── index.html
├── step2
│ ├── XVue.js
│ └── index.html
├── step3.1
│ ├── XVue.js
│ ├── compile.js
│ └── index.html
└── step3.2
├── XVue.js
├── compile.js
└── index.html
以上每個step資料夾對應下面的每一步驟，代表了程式碼實現的順序，每個資料夾下的程式碼都可以獨立執行。
1. 步驟一
建立XVue.js。
建立Vue類，通過Observer劫持監聽所有屬性。
observe函式的作用：遞迴遍歷data選項，它當中的defineReactive函式為data中每一個key定義getter和setter，達到資料劫持的目的。
步驟一對應程式碼目錄：step1
2. 步驟二
處理頁面上的<div>{{msg}}</div>，也就是收集依賴，當msg的值發生變化時，檢視需要做出相應的變化。因此需要建立依賴管理器，把所有依賴儲存起來，當資料發生變化的時候再去更新對應的依賴。
2.1 建立Dep類
Dep負責將檢視中的所有依賴收集管理，包括依賴新增和派發通知
1- 在Dep類中建立陣列deps=[]，用來存放Watcher的例項
2-建立addDep方法，新增Watcher
3-建立notify方法，通知所有的Wather執行更新。遍歷deps陣列，呼叫每個Wather的更新方法
2.2 建立監聽器Watcher類
Watcher是具體的更新執行者。
1-將當前Watcher例項新增到Dep.target上。
Dep.target = this之後在get時，就能通過Dep.target拿到當前Watcher的例項。
2-建立update方法
3-set方法中，呼叫dep.notify，讓依賴管理器通知更新，則所有的Watcher會執行update方法
那麼問題來了：Watcher在什麼時候收集最合適？
在defineReactive函式的get方法中，get方法觸發時，把Watcher放進Dep.target中。
那麼問題又來了：為什麼是在get方法中呢？
因為在掃描檢視中的依賴時，如果掃描到<div>{{msg}}</div>，此時一定會去訪問msg的值，就會觸發get。一旦get被觸發，就能將Watcher放進dep中，實現依賴收集的目的。所以get是一個合適的時間點。
程式碼測試：在get中輸出dep.deps，如果Watcher已經放進去了，並且控制檯列印出Watcher中的update方法中的log，說明這一步操作成功了。
至此，已經完成的工作如下：
步驟二對應程式碼目錄：step2
現在，Watcher發生變化時，檢視還沒有更新，下面我們將要完成檢視更新的操作。
首先，需要Compile對介面模板解析指令，進行編譯，編譯的階段實際是建立Watcher的階段。Watcher是由編譯器建立的。編譯器在做依賴收集的時候，順便把Watcher建立了。Watcher在建立的時候，立刻就能知道它將來要更新的是誰，它應該被誰管理，它發生變化以後值應該是什麼。於是Watcher就知道調誰(Updater去做更新了)。
3.步驟三
建立compile.js,用於掃描模板中所有依賴(指令、插值、繫結、事件…)，建立更新函式和Watcher
3.1 掃描模板
1-建立編譯器Compile類，接收兩個引數，el(宿主元素或選擇器)和vm(當前vue例項)
2-建立node2Fragment函式，將dom節點( $el )截成程式碼塊( 轉換為Fragment )來處理，而不是直接做dom操作，提高執行效率
3-建立compile函式，執行編譯( 將模板中的動態值替換為真實的值 )，傳入程式碼塊
4-將生成的結果追加至宿主元素
3.1.1 node2Fragment函式
建立一個新的fragment，將原生節點移動至fragment
返回fragment，傳給編譯函式進行編譯
3.1.2 compile函式
獲取所有的孩子節點，進行遍歷，判斷節點型別，並作出相應的判斷
處理元素節點
處理文字節點( 只處理{{msg}} 這種情況，其他的全部不處理)
...其他的節點型別暫時不判斷了
遍歷可能存在的子節點，往下遞迴
下面是compile函式中的兩個核心方法
1-compileElement方法：編譯元素節點
<div v-text="test" @click="onClick">{{msg}}</div>拿到所有屬性名稱，進行遍歷
2-compileText方法：編譯文字節點
程式碼測試：
在XVue constructor中，建立編譯器例項，將宿主元素el和當前vue例項作為引數傳入。
如果compileElement和compileText兩個函式能觸發，控制檯列印出"開始編譯元素節點"和"開始編譯文字節點"，則說明功能正常，可以繼續讓下走了。
對應程式碼：step3.1
3.2 編譯元素節點和文字節點，並建立更新函式
3.2.1 編譯元素節點compileElement方法實現
獲取節點所有屬性，進行遍歷。判斷指令和事件，已經相應的處理方法。
指令只試著處理v-text，v-html，v-model三個，其他的暫不處理
v-model：雙向繫結還需要處理檢視對模型的更新
3.2.2 建立更新器函式
更新器函式：接收四個引數，node，vm，exp，dir(指令)
針對指令的更新器主要是在做dom操作
在更新器函式中建立Watcher例項，當Watcher監聽到變化的時候，就能觸發檢視的更新。
至此，全部程式碼已經完成，雙向資料繫結順利實現！
對應程式碼：step3.2
Vue.js 工作機制
初始化
在new Vue()之後，Vue會呼叫初始化函式，會初始化宣告週期、事件、props、methods、data、computed和watcher等。其中最重要的是通過Object.defineProperty設定setter和getter，用來實現響應式和依賴收集。
初始化之後會呼叫$.mount掛載元件。
編譯
編譯模組分為三個階段：
1-parse
使用正則解析模板中的vue的指令、變數等等，形成抽象語法樹AST
2-optimize
標記一些靜態節點，用作後面的效能優化，在diff的時候直接略過
3-generate
把第一步生成的AST轉化為渲染函式 render function
響應式
這一塊是vue最核心的內容。初始化的時候通過defineProperty進行繫結，設定通知的機制，當編譯生成的渲染函式被實際渲染的時候，會觸發getter進行依賴收集，在資料變化的時候，觸發setter進行更新。
虛擬dom
虛擬dom是由react首創，Vue2開始支援，就是用JavaScript物件來描述dom結構，資料修改的時候，我們先修改虛擬dom中的資料，然後陣列做diff演算法，最後再彙總所有的diff，力求做最少的dom操作，畢竟js裡對比很快，而真實的dom操作太慢了。
<div name="小菠蘿" style="color:red" @click="xx">
<a>click me</a>
</div>// vdom
{
tag:'div',
props:{
name:'小菠蘿',
style: {color:red},
onClick:xx
},
children:[
{
tag:'a',
text:'click me'
}
]
}更新檢視
資料修改觸發setter，然後監聽器會通知進行修改，通過對比兩個dom樹，得到改變的地方，就是patch，然後只需要把這些差異修改即可。
編譯
compile的核心邏輯是獲取dom，遍歷dom，獲取{{}}格式的變數，以及每個dom的屬性，擷取v-和@開頭的部分來設定響應式。
