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