简析vue的双向绑定原理

2,142 阅读1分钟

答:

Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。

具体说一下Object.defineProperty:

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。

进一步:

Object.defineProperty()具体实现:

let hr={
    skill:'',
    experience:''
}

Object.defineProperty(hr, 'skill', {
    get(){
        console.log('必备技能:')
        return '画大饼'
    },
    set(newVal){
        console.log('加分项:')
    }
})

//读:
console.log(hr.skill)
//写:
hr.skill='吹牛皮'
控制台打印

必备技能:
画大饼
经验要求:
"吹牛皮"

发布订阅模式

现在已经可以检测到数据的读和写,然后就需要通知视图的更新了.

这里是典型的发布订阅模式,在这个模式下:数据是发布者(Observer),依赖对象是订阅者(Watcher),他们需要一个中间人来传递,那就是订阅器(Dep)

总结:实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发生变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者Watcher是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理。

参考链接:

Object.defineProperty() -MDN

通俗易懂了解Vue双向绑定原理及实现

推荐阅读:

发布者-订阅者模式-Microsoft Azure

系列:

更多面试简答