引入vue.js，new Vue()幹了什麼呢？
1. 初始化
呼叫Vue原型上的_init()進行初始化，會初始化vue的生命週期，props，data，methods，computed，watch等，最重要的是利用Object.definedPropty()對data物件裡面的屬性設定setter和getter函式，實現響應式和依賴收集。
2. 掛載元件
初始化之後呼叫$mount掛載元件，如果是執行時編譯，即不存在render function但是存在template的情況，需要進行【編譯】步驟。
3. 編譯
編譯三部曲，parse（解析）、optimize（標記靜態節點做優化）、generate（轉成字串）
parse：利用正則將模板轉換成抽象語法樹（AST）；
optimize： 標記靜態節點，以後update的時候，diff演算法可以跳過靜態節點
generate：將抽象語法樹（AST）轉成字串，供render去渲染DOM
在經歷過 parse、optimize 與 generate 這三個階段以後，元件中就會存在渲染 VNode 所需的 render function 了。
4. 響應式
響應式是vue中最核心的部分，利用Object.definedPropty 設定data所返回的物件後，在進行render function被渲染的時候，會對data物件進行資料讀取，會觸發getter函式，從而把data裡面的屬性進行依賴收集，依賴收集的目的是將這些屬性放到觀察者（Watcher）的觀察佇列中，一旦我們對data裡面的屬性進行修改時，就會觸發setter函式，setter告訴觀察者資料變化，需要重新渲染檢視，觀察者呼叫update來更新檢視
5. 虛擬DOM
render funtion 會被轉換成虛擬DOM，虛擬DOM實際上就是一個js物件，從頂層DOM層層描述DOM，有tag, children, isStatic, isComment等等許多屬性來做DOM描述。render function 會被轉化成 VNode 節點。Virtual DOM 其實就是一棵以 JavaScript 物件（ VNode 節點）作為基礎的樹，用物件屬性來描述節點，實際上它只是一層對真實 DOM 的抽象。
6. 更新檢視
當資料發生變化時候，會經歷setter => Watcher => update這些步驟，那麼最終是怎麼更新檢視的呢？
在update的時候，會執行patch，將新舊VNode傳進去，通過diff演算法算出差異，區域性更新檢視，做到最優化。
下面是掘金上某位老師的圖，覺得不錯，借鑑一下：