Vue响应式系统是一个数据劫持、依赖追踪、视图重渲染与DOM高效更新协同运作的闭环机制：Observer劫持数据，Dep+Effect管理依赖，render生成VNode，diff与patch完成最小化DOM更新。

Vue响应式系统不是“监听数据→更新DOM”这么简单的一条线，而是一个从数据劫持、依赖追踪、视图重渲染到真实DOM高效更新的完整闭环。它的核心价值在于让开发者只改数据，其余全部自动完成——但前提是理解这个闭环里每个环节的职责与协作逻辑。

Observer：把普通数据变成“可监听”的起点

Observer是响应式的入口模块，负责将 data 或 reactive() 中的数据递归转为响应式对象：

• Vue2 用 Object.defineProperty 逐个属性定义 getter/setter，仅支持对象已有属性和数组变异方法（push/splice等），无法拦截新增属性或直接索引赋值
• Vue3 用 Proxy 代理整个对象，天然支持属性增删、数组索引修改、Map/Set 等复杂类型，同时用 ref() 包裹基础类型，通过其 .value 的 getter/setter 衔接 Proxy 体系
• Observer 初始化时会为每个响应式对象挂载 __ob__ 标识，并创建专属 Dep 实例，为后续依赖收集打下基础

Dep + Effect/Watcher：依赖如何被记住并触发

Dep 是响应式系统的“联络中枢”，它不主动干活，但决定了谁该在什么时候动：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 每个响应式属性（或 ref）背后都关联一个 Dep 实例，内部维护 Set（Vue3）或 Array（Vue2）
• Effect（Vue3）或 Watcher（Vue2）代表一个副作用函数，比如组件的 render 函数、computed 的 getter、watch 的回调
• 依赖收集发生在 getter 被读取时：当前活跃的 Effect 自动被加入对应 Dep 的订阅列表；数据变更时，setter 触发 dep.notify()，遍历所有订阅者并重新执行其 effect

Render → VNode → Patch：虚拟 DOM 如何承接响应式更新

响应式通知只是开始，真正改变页面的是渲染链路：

立即学习“前端免费学习笔记（深入）”；

• 每次 effect 重新执行（如组件 render），都会生成一棵新的 VNode 树，描述期望的 DOM 结构
• 新旧 VNode 进入 diff 算法（基于双端对比的同层比对），跳过未变化节点，精准定位需要更新/移动/删除的 DOM 元素
• Patch 阶段 将 diff 结果映射为真实 DOM 操作：复用节点、局部更新 props/class、最小化 innerHTML 重写，避免全量重绘
• 整个过程由响应式系统驱动，但渲染本身无感知——它只管“给什么，就怎么画”，而“什么时候给新东西”，由 Observer → Dep → Effect 闭环决定

为什么说这是“闭环”，而不是单向流程？

因为每一环都反向支撑前一环的可靠性：

• 没有 Observer 的劫持，Dep 就收不到读写信号；没有 Dep 的订阅管理，Effect 就不知道该不该重跑
• 没有 Effect 执行 render，VNode 就不会生成；没有 VNode 和 patch，再精准的响应通知也变不成用户看到的画面
• 反过来，render 函数中访问的每一个响应式字段，都在触发 getter 时完成了依赖登记——这意味着视图天然“声明”了它关心哪些数据，系统才得以精准通知