vue雙向綁定原理初探

幾種實現雙向綁定的作法

發佈者-訂閱者模式（backbone.js）

髒值檢查（angular.js） 

數據劫持（vue.js）

發佈者-訂閱者模式: 通常經過sub, pub的方式實現數據和視圖的綁定監聽，更新數據方式一般作法是 vm.set('property', value) 

這種方式如今畢竟太low了，咱們更但願經過 vm.property = value 這種方式更新數據，同時自動更新視圖，因而有了下面兩種方式

髒值檢查: angular.js 是經過髒值檢測的方式比對數據是否有變動，來決定是否更新視圖，最簡單的方式就是經過 setInterval() 定時輪詢檢測數據變更，固然Google不會這麼low，angular只有在指定的事件觸發時進入髒值檢測，大體以下：

• DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )

• XHR響應事件 ( $http )

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

• Timer事件( $timeout , $interval )

• 執行 $digest() 或 $apply()

數據劫持: vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

極簡雙向綁定的實現

<input type="text" id="a">
<br>
<span id="b"></span>
<script>
    var obj = {}
    Object.defineProperty(obj, 'hello',{
      set: function (newVal) {
        document.getElementById('a').value = newVal
        document.getElementById('b').innerHTML =newVal
      }
    })
    document.addEventListener('keyup',function (e) {
      obj.hello =e.target.value
    })
</script>

 

VUE的雙向綁定的實現

思路整理

已經瞭解到vue是經過數據劫持的方式來作數據綁定的，其中最核心的方法即是經過Object.defineProperty()來實現對屬性的劫持，達到監聽數據變更的目的，無疑這個方法是本文中最重要、最基礎的內容之一.
整理了一下，要實現mvvm的雙向綁定，就必需要實現如下幾點：
一、實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
二、實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
三、實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖
四、mvvm入口函數，整合以上三者