双向数据绑定原理图


用户 视图 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. 用户看到更新后的界面。
相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君5 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite