本篇文章是在閱讀《剖析 Vue.js 內部運行機制》小冊子後總結所得，想要了解詳細內容，請參考原文：https://juejin.im/book/5a36661851882538e2259c0f
- 閱讀源碼前想要先了解Vue的內部機制和運行原理，幫助更快更有針對性的閱讀源碼
- 所以就找到了上面的小冊子，小冊子裏主要是簡化版的源碼
- 這篇文章更主要是對小冊子消化後的個人筆記和總結，大部分內容是使用流程圖等對Vue運行的整體流程和各個階段做更加直觀的展示
下面對上圖所示的整體流程做簡單介紹：
一、主要步驟
1、初始化
vue初始化init的過程包含生命週期、事件、 props、 methods、 data、 computed 與 watch等的初始化，
其中最主要的兩個步驟是watch的初始化和data屬性的observer過程，這兩個過程是實現響應式和依賴收集的基礎
2、編譯
編譯是將template轉變爲render function的過程，包括：解釋、優化、生成三個步驟
解釋：template->AST（抽象語法樹）
優化：標記AST中的靜態（static）節點
生成：AST->render function
3、render function執行
render function執行後生成虛擬節點樹（Vnode DOM Tree）
4、渲染展現頁面
至此，頁面展示在瀏覽器中
二、依賴收集過程
整體流程圖中render function執行開始的綠色箭頭指向的流程爲依賴收集過程
1、render function執行中會依次調用使用到的data.attr的get方法
2、get方法調用Dep.add將Vue對象中的watch加入到attr.Dep數組裏
3、整個頁面渲染完畢後，所有需要使用attr的組件Vue對象的watch都收集到attr.Dep，attr.Dep內容即爲template與data的依賴關係
三、響應式原理
整體流程圖中attr.set()執行開始的紅色箭頭指向的流程爲響應式原理
1、對data.attr賦值即調用attr.set方法
2、attr.set會調用Dep.notify()，notify方法是依次執行attr.Dep數組中watch對象的update方法
3、update()是重新渲染視圖的過程，中間生成新的Vnode DOM Tree，供patch使用
四、update中的patch
patch，是將update產生的New Vnode節點與上一次渲染的Old Vnode進行對比的過程，最終只有對比後的差異節點纔會被更新到視圖上，從而達到提高update性能的目的
五、主要內容圖解
1、編譯過程
2、依賴收集及響應式原理
3、批量異步更新策略及 nextTick 原理
