Vue 的双向数据绑定机制是其响应式系统的核心功能，基于数据劫持与发布-订阅模式的深度整合实现。
发布 - 订阅模式（Publish-Subscribe Pattern）
发布 - 订阅模式（Publish-Subscribe Pattern，简称 Pub/Sub）是行为型设计模式的典型实现，其核心目标是解耦事件生产者（发布者）与事件消费者（订阅者），通过抽象的「事件调度中心」实现多对多的异步通信。该模式广泛应用于分布式系统、前端响应式框架（如 Vue）及消息中间件（如 Kafka）等场景，是构建松耦合、高可维护系统的基础模型。
发布 - 订阅模式通过三个独立组件实现协作，各组件严格遵循「单一职责原则」，共同构建松耦合的事件通信体系。
发布者（Publisher）： 作为「事件生产者」，负责检测业务事件（如状态变更、用户操作触发）或主动生成事件（如定时任务），并通过「调度中心」向订阅者广播事件。不直接依赖订阅者的具体实现，仅需感知「调度中心」的事件提交接口（典型如 publish(eventType, data) 方法 ）。订单系统作为发布者，在用户完成支付后，生成 "订单支付成功" 事件 ，并提交至调度中心。
订阅者（Subscriber）： 作为「事件消费者」，需主动向调度中心注册兴趣事件（如声明 "关注支付成功事件" ），并绑定回调逻辑（事件发生时执行的业务操作，如扣减库存、发送通知 ）。无需感知发布者的内部逻辑，仅需关注事件类型与有效载荷（Payload）的处理。库存管理系统作为订阅者，向调度中心注册 "支付成功" 事件订阅，当事件触发时，执行扣减商品库存的回调逻辑。
调度中心（Event Bus / Message Broker）： 作为「事件路由中枢」，需完成三项核心任务。① 维护映射关系：建立「事件类型 → 订阅者列表」的关联（典型实现为哈希表，键为事件类型，值为订阅者回调集合 ）；② 事件转发：接收发布者提交的事件，根据类型路由到对应订阅者；③ 调度策略控制：支持同步 / 异步执行、并发限制、事件过滤等高级逻辑（如消息中间件可实现持久化、重试机制 ）。MQ 消息队列作为调度中心，接收订单系统的 "支付成功" 事件，自动路由到库存系统、营销系统等订阅者，触发下游业务。
三者通过"发布者不直接调用订阅者，而是依赖调度中心转发"的设计，实现了组件间的解耦 ------ 发布者无需知道谁在监听事件，订阅者也无需知道事件由谁产生。该模型可扩展为多对多通信：一个发布者可触发多种事件类型，一个订阅者可监听多个事件类型（如营销系统同时订阅 "支付成功""订单签收" 事件 ）。这种职责分离，是构建高可维护、可扩展系统的基础，也是理解 Vue 响应式原理（Dep 作为调度中心，Observer 作为发布者，Watcher 作为订阅者 ）的核心逻辑。
双向数据绑定
Vue 的双向数据绑定机制是其响应式系统的核心功能，基于数据劫持与发布-订阅模式的深度整合实现。上张图清晰展现了 MVVM 模式下双向数据绑定的核心流程，各模块分工与协作关系如下：
new MVVM()：框架入口与初始化
作为 MVVM 框架的启动点，负责整合核心模块（Observer、Compile 等 ），初始化时会同时触发数据劫持（通过 Observer）和模板解析（通过 Compile），搭建起数据层与视图层的关联基础。
Observer：数据劫持与响应式化
遍历 data 中所有属性，通过 Object.defineProperty（Vue2）或 Proxy（Vue3）实现数据劫持，为每个属性关联一个 Dep。一旦属性值变化，Observer 会通知对应 Dep 触发更新流程，是 "数据驱动视图" 的基础。
Dep：依赖管理中心
扮演发布者角色，内部维护订阅者列表（Watcher）。当 Observer 监测到数据变化，会调用 Dep 的通知逻辑；同时，Watcher 初始化时会主动订阅 Dep，建立 "数据 - 依赖 - 更新" 的关联。
Compile：模板解析与指令处理
扫描 DOM 模板，解析 v-model、{{}} 等指令 / 插值语法，完成两件事：初始化视图：把初始数据渲染到 DOM，让页面有默认展示；创建 Watcher：为每个需要响应式更新的节点，关联一个 Watcher，并订阅对应数据的 Dep，绑定 "数据变化 → 视图更新" 的回调（如 Updater 逻辑 ）。
Watcher：订阅与更新调度
作为订阅者，一边订阅 Dep（监听数据变化），一边关联 Updater（执行视图更新）。当 Dep 通知数据变化时，Watcher 触发 Updater，完成 DOM 更新，实现 "数据驱动视图"；同时，用户操作视图（如输入框输入）时，Watcher 也会反向更新数据，配合 v-model 完成 "视图驱动数据"。
Updater：视图更新执行者
接收 Watcher 传递的更新指令，具体操作 DOM（如修改文本、更新属性 ），是 "数据变化落地到视图" 的最终执行环节。
Vue.js 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 主要分为以下几个步骤:
(1) 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
(2) compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
(3) Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器 (dep) 里面添加自己 ②自身必须有一个 update() 方法 ③待属性变动 dep.notify() 时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
(4) MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化 (input) -> 数据 model 变更的双向绑定效果。