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

发布网友发布时间：2022-12-05 05:38

共1个回答

热心网友时间：2023-11-17 20:01

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，从而使它关联的组件重新渲染。

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