双向数据绑定原理图

在这里插入图片描述

用户 视图 ViewModel 观察者 依赖收集器 Watcher 虚拟DOM 真实DOM 输入数据 触发input事件 更新数据 通知变化 通知所有Watcher 更新虚拟DOM 与旧虚拟DOM对比 更新真实DOM 更新显示 用户看到更新后的界面 在初始化时,Observer会为每个属性创建一个Dep 初始化时,Watcher会被添加到相应的Dep中 Vue使用虚拟DOM来优化更新性能 用户 视图 ViewModel 观察者 依赖收集器 Watcher 虚拟DOM 真实DOM
  1. 用户在视图中输入数据。
  2. 视图触发ViewModel中的input事件。
  3. ViewModel通知Observer更新数据。
  4. Observer检测到数据变化,通知相应的Dep(依赖收集器)。
  5. Dep通知所有相关的Watcher。
  6. Watcher触发虚拟DOM的更新。
  7. 虚拟DOM进行内部对比,找出需要更新的部分。
  8. 虚拟DOM更新真实DOM。
  9. 真实DOM更新视图显示。
  10. 用户看到更新后的界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值