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之间进行统一管理