双向数据绑定原理图


用户 视图 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. 用户看到更新后的界面。
相关推荐
岁月宁静5 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐5 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
atwednesday5 小时前
日志处理
javascript
#做一个清醒的人5 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪5 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
浩男孩5 小时前
🍀继分页器组件后,封装了个抽屉组件
前端
Dolphin_海豚5 小时前
@vue/reactivity
前端·vue.js·面试
该用户已不存在5 小时前
程序员的噩梦,祖传代码该怎么下手?
前端·后端
namehu6 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
rit84324996 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6