vue数据双向绑定的原理+响应式原理

https://my.oschina.net/u/4386652/blog/4281447
双向绑定:
数据变化更新视图 view => model 利用Object.defineProperty的get、set函数对数据更改、读取进行监听。如果数据改变就通知watcher进行重新渲染页面
视图变化更新数据 model => view 利用事件监听,通过target.value拿到新值赋值给data

数据变化更新视图关键在于 如何知道数据发生了变化,数据变化了通知视图进行更新
让数据变得能监测,需要使用Object.defineProperty中的get、set函数
let car = {}
let val = 3000
Object.defineProperty(car, 'price', {
get(){
console.log('price属性被读取了')
return val
},
set(newVal){
console.log('price属性被修改了')
val = newVal
}
})
car.price = 4000 设置属性值会进入set方法
console.log(car.price) 读取属性值会进入get方法
Object.defineProperty通过对数据读取和设置进入的get、set函数对数据进行了监听

响应式原理:
每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。


image.png

思考:
get函数好像意义不大
发布者、订阅者不能很好理解

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容