vue.js和angular雙向數據綁定的實現原理

一、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 雙向綁定原理(數據綁定機制)

三、總結

待補充