vue的雙向數據綁定原理

最近在網上看了vue的雙向數據綁定分析，記錄一下，它的總體流程圖是這樣的


當咱們這樣去使用vue的時候都經歷了什麼

每次須要改變數據的時候都是this.data='xx'去修改數值，因此我就從這裏下手，咱們先遍歷data裏的全部屬性，而後經過object.defineProperty的get和set方法去監聽數據的修改，這裏就完成了圖裏的觀察者對象observer

到這咱們就能夠完成數據的監聽了，可是，它是怎麼觸發視圖的更新的呢，這裏要加入發佈訂閱模式，在數據發生變化的時候去通知全部watcher更新數值，因此要在這以前，就是在編譯到視圖讀取值的時候把watcher加入到watcherCollector數組裏

如今開始編譯HTML模版對象，先建立代碼碎片，而後用js循環遍歷dom節點

經過正則拿到的是相似people.name（由於咱們是這樣用的{{people.name}}）

讀這個屬性的時候就會觸發observer的get函數，此時Dep.target是沒有值的，因此這時候依賴還沒添加成功

因此在讀這個屬性以後去new一個watcher實例

把expr（people.name），vm，和回調函數傳進去掛載到this裏，而後把this賦值給全局的Dep.target，因此這個watcher長這個樣子

由於建立watcher會去調用getOldVal這個方法，它又回去拿people.name的值因此會再次觸發observer裏的get函數，此時Dep.target裏就是有值的，這時候依賴就添加成功了，編譯到HTML裏其它值的時候也相似這樣，初始化完成，當修改值的時候就會觸發，observer裏的set函數，若是新舊值不同的時候就會去調用notify函數，通知全部watcher更新數值，這個時候基本就串起來了

還有一點就是代理，數據代理實現 this.person.name = '海賊王——路飛'功能，而不是this.$data.person.name = '海賊王——路飛'，也是經過object.defineProperty的get和set方法去實現的

具體代碼地址（轉）：https://github.com/SUNYunZeng...