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

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

2024-09-23 17:19:02   216人阅读

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


联系
我们