双向数据绑定原理图

用户 视图 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. 用户看到更新后的界面。