vue2.0数据双向绑定的原理

本文详细介绍了Vue.js中的MVVM模型,重点讨论了数据绑定如何通过object.defineProperty的set/get实现,以及如何通过重写数组方法来实现监听。同时,解释了DOM事件监听在视图更新模型中的作用,通过事件回调执行相应操作。此外,还提到了如何使用'.'关键字处理复杂对象嵌套,实现复合object的双向映射,确保模型和视图之间的同步更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • Vue采用MVVM模型,(Model-View-ViewModel)

  • 模型 → 视图  用数据绑定实现           视图 → 模型  用dom事件监听实现

        模型 ←→ 视图  就是数据双向绑定,通过viewModel实现

  • 数据绑定:用object.defineProperty的set/get 实现对数据的操作,数组的监听需要通过重写数组的方法,返回一个新的数组给数据,才能实现监听

  • DOM事件监听:监听事件的变化,调用事件的回调函数,向订阅者发送消息,执行操作。

  • Model和view通过viewModel是一一对应的关系,但是view和model并没有联系。

  • 复杂对象的嵌套,通过关键字 ’ . ’ 实现对对象层级的区分,非包含点的字段的值都是string,包含点的字段是一个Object,实现多个对象嵌套在View模板中,实现复合object的双向映射。 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值