vue.js和angular雙向資料繫結的實現原理
阿新 • • 發佈:2018-12-05
一、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()
三、總結
待補充