双向数据绑定原理图


用户 视图 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. 用户看到更新后的界面。
相关推荐
CodeSheep4 分钟前
JetBrains官宣,又一个IDE可以免费用了!
前端·后端·程序员
刘新明19896 分钟前
Frida辅助分析OLLVM虚假控制流程(下)
java·开发语言·前端
江城开朗的豌豆23 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician28 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥31 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN666843 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel1 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端