vue3 响应式原理图

Vue3 的响应式原理主要基于其数据绑定和观察者模式。以下是简化的响应式原理图：

1. **数据劫持 (Dependent Data Detection)**:
- 当创建一个 `ref` 或 ` reactive` 对象时，Vue会自动添加深度检测能力，对其中的数据进行劫持。
- 每次数据变化（如赋值、数组操作等），会触发一个依赖收集过程，将变更的路径记录下来。

2. **Watcher (Observer)**:
- 创建了一个Watcher实例，每个`dep`（Dependency Object）都有对应的Watcher负责监视这些数据的变化。
- Watcher包含了两个主要职责：更新函数（updateFn）用于处理数据的改变，并通知所有订阅者；以及队列（queue）用于延迟执行直到DOM更新完成。

3. **更新队列 (Update Queue)**:
- 当数据发生变化时，新的Watcher会被添加到对应`dep`的队列中，不会立即执行。
- Vue通过`nextTick`（Promise.resolve().then）确保在DOM更新后再批量执行所有的更新操作。

4. **计算属性和异步依赖 (Computed and Async Dependencies)**:
- 计算属性本质上也是响应式的，它们会监听底层数据的变化并重新计算结果。
- 异步依赖（比如来自网络的API请求）会在数据真正可用时才触发。

5. **虚拟DOM和Diff算法**:
- 更新后的响应式数据会驱动虚拟DOM的更新。
- 使用高效的Diff算法比较新旧虚拟DOM差异，然后只更新真正的DOM节点。