一：最早的框架如backbone，實現對數據的變化監測是通過設置數據模型api。

　　比如其model對象管理的是數據，而修改這些數據就是通過固定的方法(set)來觸發事件從而更新dom，

<p id="dom">1</p>
var Model={
      a:1,
      b:2
}
var trigger=function(value){
      document.getElementById(‘dom‘).html(value)  //更新dom操作  
}
var set=function(data,value){
      trigger(value)  
}    
set(Model.a,
 
0)

二：angular框架，采用臟檢查機制，當在dom中使用{{data}}綁定數據時就為此數據添加了一個觀察器。

　　當只要有數據更新時，就會遍歷所有的觀察器，如果該數據更新，就更新相應的dom。

三：react框架，原理是當某項數據發生更新時，按照新數據生成一個完整的虛擬dom，

　　此時就有舊dom和新dom，然後使用它的差異算法計算出兩個dom中不同的部分，最後在現實的dom中更新差異。

四：vue框架，原理和第一種很類似，不過通過一些方法使得最後的使用效果和angular以及react類似。

　　當在註冊Vue實例時，vue會將所有註冊到data中的數據轉換為set/get樣式，轉化的方式是通過Object.fefineProperty()實現的。

var vm=new Vue({
      data:{
              value:‘value‘         
      }
})
Object.defineProperty(vm.$data,value,{
       set(newValue){
               console.log(‘我要變了‘);
               //通知該數據所有訂閱者watcher更新，然後更新dom
       },
       get(){
               console.log(‘正在取值‘);
               //添加該數據的訂閱者watcher
 

       }
})        

關於前端mvc或mvvm框架數據跟蹤變化實現dom雙向綁定的原理