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

 我来答
科创17
2022-06-28 · TA获得超过5906个赞
知道小有建树答主
回答量:2846
采纳率:100%
帮助的人:175万
展开全部

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函数好像意义不大
发布者、订阅者不能很好理解

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式