# 雙向綁定  <Br> ## 核心實現類: Observer : 它的作用是給對象的屬性添加 getter 和 setter，用于依賴收集和派發更新 Dep : 用于收集當前響應式對象的依賴關系,每個響應式對象包括子對象都擁有一個 Dep 實例（里面 subs 是 Watcher 實例數組）,當數據有變更時,會通過 dep.notify()通知各個 watcher。 Watcher : 觀察者對象 , 實例分為渲染 watcher (render watcher),計算屬性 watcher (computed watcher),偵聽器 watcher（user watcher）三種 <Br> ## Watcher 和 Dep 的關系 watcher 中實例化了 dep 并向 dep.subs 中添加了訂閱者,dep 通過 notify 遍歷了 dep.subs 通知每個 watcher 更新。 <Br> ## 依賴收集 1. initState 時,對 computed 屬性初始化時,觸發 computed watcher 依賴收集 2. initState 時,對偵聽屬性初始化時,觸發 user watcher 依賴收集 3. render()的過程,觸發 render watcher 依賴收集 4. re-render 時,vm.render()再次執行,會移除所有 subs 中的 watcer 的訂閱,重新賦值。 <Br> ## 派發更新 1. 組件中對響應的數據進行了修改,觸發 setter 的邏輯 2. 調用 dep.notify() 3. 遍歷所有的 subs（Watcher 實例）,調用每一個 watcher 的 update 方法。 <Br> ## 原理 當創建 Vue 實例時,vue 會遍歷 data 選項的屬性,利用 Object.defineProperty 為屬性添加 getter 和 setter 對數據的讀取進行劫持（getter 用來依賴收集,setter 用來派發更新）,并且在內部追蹤依賴,在屬性被訪問和修改時通知變化。 每個組件實例會有相應的 watcher 實例,會在組件渲染的過程中記錄依賴的所有數據屬性（進行依賴收集,還有 computed watcher,user watcher 實例）,之后依賴項被改動時,setter 方法會通知依賴與此 data 的 watcher 實例重新計算（派發更新）,從而使它關聯的組件重新渲染。 一句話總結: vue.js 采用數據劫持結合發布-訂閱模式,通過 Object.defineproperty 來劫持各個屬性的 setter,getter,在數據變動時發布消息給訂閱者,觸發響應的監聽回調 <Br> # 參考資料 * [12道vue高頻原理面試題,你能答出幾道?](https://zhuanlan.zhihu.com/p/101330697) * [【簡易版】如何實現一個簡單的雙向綁定——Vue2.0 | MVVM | 數據劫持+發布訂閱](https://blog.csdn.net/swallowblank/article/details/107494044) * [【困難版】如何實現一個類vue的雙向綁定——Vue2.0 | MVVM | 數據劫持+發布訂閱](https://blog.csdn.net/swallowblank/article/details/107542882)