Vue响应式系统是观察者、发布-订阅与Proxy机制协同作用的结果：观察者模式构建核心逻辑，发布-订阅支撑跨组件通信，Proxy实现数据劫持，组合模式统一虚拟DOM更新。

Vue 响应式系统不是单一模式的产物，而是观察者模式、发布-订阅模式与代理（Proxy）机制协同作用的结果。其中观察者模式构成核心逻辑骨架，发布-订阅支撑事件通信，而 Proxy（Vue 3）或 Object.defineProperty（Vue 2）是实现数据劫持的技术载体。

观察者模式是响应式系统的主干

Vue 把每个响应式数据属性看作“被观察者”，把依赖它的计算属性、渲染函数、watch 回调等看作“观察者”。当数据变化时，通知所有关联的观察者执行更新。

• 依赖收集发生在 getter 中：组件首次渲染时读取 data 属性，触发 getter，此时 Vue 将当前副作用（如 render 函数）加入该属性的依赖列表。
• 变更通知发生在 setter 或 Proxy 的 set 拦截器中：修改值后，遍历依赖列表并触发更新（如重新执行 render）。
• computed 和 watch 都是观察者模式的典型应用——前者自动建立依赖关系并缓存结果，后者显式声明依赖与响应动作。

发布-订阅模式支撑跨组件通信

虽然响应式数据本身走的是观察者路径，但组件间解耦通信（如 $emit / $on、mitt、EventBus）明确采用发布-订阅模式。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 事件总线或父/子组件通信中，$emit 是“发布”，$on 是“订阅”，事件中心（如 Vue.prototype.$events 或独立 event bus 实例）充当中央调度者。
• 它不直接依赖数据变化，而是由开发者主动触发，适合业务逻辑解耦，比如表单提交后通知多个模块刷新状态。
• 注意：Vue 3 废弃了实例上的 $on/$off/$emit（仅保留组件内 $emit），推荐用 mitt 或 provide/inject + 自定义事件替代，本质仍是发布-订阅思想。

代理模式（Proxy）是 Vue 3 响应式的底层实现机制

Proxy 不是传统设计模式分类中的“代理模式（Proxy Pattern）”，但在广义上承担了代理角色：它不改变原始对象，而是创建一个拦截层，对外暴露相同接口，对内控制访问行为。

• Vue 3 的 reactive() 返回的就是一个 Proxy 实例，所有 get/set/delete 等操作都经过 handler 拦截。
• 相比 Vue 2 的 Object.defineProperty，Proxy 天然支持动态新增/删除属性、数组索引、Map/Set 等，让响应式更“透明”和“完整”。
• ref() 内部也使用 Proxy（对 .value 访问做代理）+ Object.defineProperty（兼容 .value 的响应式暴露），体现组合运用。

组合模式支撑虚拟 DOM 与组件树统一更新

响应式更新最终要落实到视图，而 Vue 的 VNode 树与组件树都采用组合模式：节点与子树拥有统一接口（如 patch、update、mount）。

• 一个组件实例、一个普通 HTML 元素、一段文本，都被抽象为 VNode；它们都能被同一套 diff 和 patch 逻辑处理。
• 组件嵌套形成树形结构，父组件更新时，可递归触发子组件的响应式更新流程，无需区分“叶子节点”还是“分支节点”。
• 这种一致性大幅简化了更新逻辑，也让 v-if、v-for、动态组件等特性得以自然支持。

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