vue响应式系统本质是观察者模式，因数据属性（subject）与watcher（observer）间存在直接引用和同步通知关系；dep仅作为属性级依赖调度器内嵌于subject，并非独立事件总线，故不属发布-订阅模式。

Vue 响应式系统的核心设计模式是观察者模式，但它不是纯理论意义上的观察者模式，而是融合了发布-订阅思想的增强实现。关键在于：数据变化时，不直接调用所有视图更新函数，而是通过一个中间调度角色（Dep）统一管理依赖与通知。

为什么说是“观察者模式”而非“发布-订阅模式”？

Vue 的响应式机制中，数据对象（如 data 中的属性）是被观察者（Subject），组件的渲染 watcher 是观察者（Observer）。当属性被读取（getter）时，当前活跃的 watcher 会把自己注册进该属性对应的 Dep 实例；当属性被修改（setter）时，Dep 主动遍历并通知所有已注册的 watcher 执行更新。这个过程是同步、直接、有明确引用关系的，符合观察者模式的本质特征。

虽然 Dep 起到了类似“事件中心”的作用，但它不对外暴露订阅接口，也不支持任意字符串事件名，其生命周期和作用域完全绑定在响应式属性上，因此它不是独立的消息总线，而是观察者模式中“被观察者内部的依赖调度器”。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

三个核心角色如何协作？

Vue2 中响应式由三个类协同完成：

• 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；
• 依赖收集发生在渲染/求值的运行时执行流中，天然具备上下文感知能力，这是静态事件名做不到的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！