一、vue雙向資料繫結

1、原理

資料劫持： vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。

2、實現步驟

要實現mvvm的雙向繫結，就必須要實現以下幾點：

• 實現一個數據監聽器Observer，能夠對資料物件的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者
• 實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換資料，以及繫結相應的更新函式
• 實現一個Watcher，作為連線Observer和Compile的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令繫結的相應回撥函式，從而更新檢視
• mvvm入口函式，整合以上三者

上述流程如圖所示：

文獻來源：剖析Vue原理&實現雙向繫結MVVM

二、angular雙向資料繫結

1、原理

髒值檢查：angular.js 是通過髒值檢測的方式比對資料是否有變更，來決定是否更新檢視，最簡單的方式就是通過 setInterval() 定時輪詢檢測資料變動，然而angular只有在指定的事件觸發時進入髒值檢測。

2、實現流程如下

• DOM事件，譬如使用者輸入文字，點選按鈕等。( ng-click )

• XHR響應事件 ( $http )

• 瀏覽器Location變更事件 ( $location )

• Timer事件( timeout,interval )

• 執行 digest()或apply()

文獻參考：AngularJs 雙向繫結原理(資料繫結機制)

三、總結

待補充