首页 > 代码库 > 关于前端mvc或mvvm框架数据跟踪变化实现dom双向绑定的原理

关于前端mvc或mvvm框架数据跟踪变化实现dom双向绑定的原理

一:最早的框架如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双向绑定的原理