答:
Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。
具体说一下Object.defineProperty:
代码语言:javascript复制Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
Object.defineProperty(obj, prop, descriptor)
obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。
进一步:
Object.defineProperty()具体实现:
代码语言:javascript复制let hr={
skill:'',
experience:''
}
Object.defineProperty(hr, 'skill', {
get(){
console.log('必备技能:')
return '画大饼'
},
set(newVal){
console.log('加分项:')
}
})
//读:
console.log(hr.skill)
//写:
hr.skill='吹牛皮'
代码语言:javascript复制控制台打印
必备技能:
画大饼
经验要求:
"吹牛皮"
发布订阅模式
现在已经可以检测到数据的读和写,然后就需要通知视图的更新了.
这里是典型的发布订阅模式,在这个模式下:数据是发布者(Observer),依赖对象是订阅者(Watcher),他们需要一个中间人来传递,那就是订阅器(Dep)。
总结:实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发生变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者Watcher是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理。