简析vue的双向绑定原理

答：

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

我是掘金安东尼： 一名人气前端技术博主（文章 100w+ 阅读量）

终身写作者（INFP 写作人格）

坚持与热爱（简书打卡 1000 日）

我能陪你一起度过漫长技术岁月吗（以梦为马）

觉得不错，给个点赞和关注吧（这是我最大的动力 ）b(￣▽￣)d