vue 源碼簡述

vue實現的關鍵點

1. Observer類，該類是用於監控數據的變化，核心函數Object.defineProperty
2. Directive類，該類是用於DOM節點與數據進行一一對應
3. Binding類，該類是用於快速定位指令與各種數據的關係，經過對象鍵值對的特質避免循環搜索
4. Watcher類，該類用於在DOM中的數據發生變化，執行相應的update函數，更新DOM

實現過程

1. 保存實例參數
2. 把公共指令和用戶參數作合併，公共指令中存儲着不一樣類型節點的update函數
3. 初始化數據監聽模塊，即Observer類
   3.1 遍歷數據對象，若是值類型爲對象或數組則繼續深度遍歷，而且記錄父節點（記錄父節點是爲了模擬事件冒泡）不然定義監聽函數。
   3.2 監聽函數經過Object.defineProperty能夠監聽數據的變化而且調用函數，該函數的功能是調用訂閱事件而且逐級冒泡調用父級訂閱事件。
4. 初始化Bingding對象，該對象保存在vue實例的屬性rootBingding中，設置訂閱事件
5. 掛載元素
   5.1 遍歷DOM元素的每一個節點。當遍歷到文本節點時，建立一個新的文本節點，把應該顯示的數據填上，刪除舊的文本節點。若是文本節點中含有指令，建立Directive實例，保存節點和數據。
   5.2 在建立Directive類過程當中建立Watcher類（該類保存上下文、更新回調函數等），而且調用公共指令中的update函數。
   5.3 Watcher類實例化過程當中根據路徑建立Binding對象，並把該對象放入到rootBingding中，格式與用戶傳入進來的data格式一致，在該Binding對象中存放watcher實例。這樣當指令更新時，利用Binding的對象特性能夠快速定位到相應的watcher類，調用watcher類中的更新函數，實現DOM節點的部分更新。

代碼

https://github.com/youngwind/...