双效绑定的原理

113 阅读1分钟

1. vue.js是采用数据劫持结合发布者-订阅者模模式的方式,通过Object.defineProperty()来劫持setter, getter方法,在数据变动的时候发布消息给订阅者,触发相应的监听回调来渲染试图

2.Object.defineProperty()有三个属性: 

  • 我要设置的对象。
  • 要设置对象的书属性。
  •  要设置的属性的值,这个值时一个对象。

3. 对象里面有几个对象描述符:

 value:设置属性值 

enumerable:这个属性默认是false,设置成true的时候,定义的对象obj就可以被遍历。

 configurable:这个属性默认的是false,设置为true的时候,定义的属性值可以被删除。 writable:这个属性默认的是false,设置为true的时候,定义的属性值可以被修改。 静态方法: 

get: 是用来获取定义的属性,一般是return。。。。。。 set: 是用来修改定义的属性值,里面有一个参数newval,newval就是定义的属性值。

4.代码

  var obj = {}
           var a = 1
            Object.defineProperties(obj, {
                a: {
                    set(newval) {
                        a = newval
                        console.log(newval)
                    },
                    get(){
                         return a
                    }
                },
                b: {
                    value: 2,
                    enumerable: true
                }
            })
            obj.a = 2            //设置   
            console.log(obj.a)   //获取
          obj.a = 4
           console.log(obj)
          for(var i in obj){
              console.log(obj[i])
          }
          delete obj.a
          console.log(obj)

5.

双向绑定: 首先要对数据进行实时监听,所以我们要设置一个监听器observer 用来监听所有的属性,如果这个属性发生改变了就需要告诉订阅者watcher 看他是否需要更新 因为订阅者很多 所以我们需要有一个订阅器dep用来收集这些订阅者 然后在监听器observer和订阅者watcher之间进行统一管理