Vue响应式系统本质是观察者模式，因数据属性（Subject）与Watcher（Observer）间存在直接引用和同步通知关系；Dep仅作为属性级依赖调度器内嵌于Subject，并非独立事件总线，故不属发布-订阅模式。
Vue 响应式系统的核心设计模式是观察者模式，但它不是纯理论意义上的观察者模式，而是融合了发布-订阅思想的增强实现。关键在于：数据变化时，不直接调用所有视图更新函数，而是通过一个中间调度角色（Dep）统一管理依赖与通知。
为什么说是“观察者模式”而非“发布-订阅模式”？
Vue 的响应式机制中，数据对象（如 data 中的属性）是被观察者（Subject），组件的渲染 watcher 是观察者（Observer）。当属性被读取（getter）时，当前活跃的 watcher 会把自己注册进该属性对应的 Dep 实例；当属性被修改（setter）时，Dep 主动遍历并通知所有已注册的 watcher 执行更新。这个过程是同步、直接、有明确引用关系的，符合观察者模式的本质特征。
虽然 Dep 起到了类似“事件中心”的作用，但它不对外暴露订阅接口，也不支持任意字符串事件名，其生命周期和作用域完全绑定在响应式属性上，因此它不是独立的消息总线，而是观察者模式中“被观察者内部的依赖调度器”。
三个核心角色如何协作？
Vue2 中响应式由三个类协同完成：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
Observer：负责递归遍历 data，对每个属性调用defineReactive，用Object.defineProperty劫持访问逻辑，为每个属性创建专属Dep。 -
Dep：每个响应式属性独有一个Dep实例，内部维护subs数组（存放所有依赖它的 watcher），提供depend()（收集）和notify()（派发）方法。 -
Watcher：每个组件实例、计算属性、watch选项都会生成一个 watcher。它在求值过程中触发 getter，从而完成依赖收集；收到通知后，重新求值或触发更新。
典型场景中的观察者体现
这些 Vue 特性背后都是观察者模式在运行：
- v-model：输入框修改触发 data 更新 → dep.notify() → watcher 检测到依赖变化 → 触发视图重渲染。
-
计算属性：定义时访问
this.message→ 收集到该属性的 dep 中；message 变化 → 通知该计算属性的 watcher 重新执行函数并缓存新值。 - watch 选项：创建一个专用 watcher，显式订阅某个响应式字段，变化时执行回调——这是观察者模式最直白的使用方式。
和纯发布-订阅的区别要点
Vue 不采用完全解耦的发布-订阅，是因为它需要精准依赖追踪：
- 发布-订阅通常靠字符串事件名通信（如
$emit('user:update')），无法自动识别谁依赖了哪个具体字段； - Vue 的 dep 是按属性粒度建立的，
message和count各自拥有独立 dep，更新message不会误触发监听count的 watcher； - 依赖收集发生在渲染/求值的运行时执行流中，天然具备上下文感知能力，这是静态事件名做不到的。
