Vue响应式本质是通过Object.defineProperty（Vue 2）或Proxy（Vue 3）拦截数据读写，自动收集依赖（Dep）并通知Watcher更新视图；Vue 3支持动态属性、数组索引及Map/Set等原生结构，且依赖逻辑解耦为effect/track/trigger模型。

Vue响应式数据劫持，本质是让数据“自己感知读写”，并在变化时自动通知视图更新——不靠轮询，也不靠手动监听，靠的是对属性访问行为的精准拦截和依赖关系的自动建立。

数据劫持：给属性装上“感应开关”

Vue 2 使用 Object.defineProperty，Vue 3 升级为 Proxy，目的都是同一个：拦截对数据的读（get）和写（set）操作。

• 读取时（如模板中 {{ msg }}），触发 getter，悄悄记下“谁正在用我”——这就是依赖收集的起点；
• 修改时（如 this.count++），触发 setter，立刻广播：“我变了！”——所有登记过的观察者收到通知；
• Vue 3 的 Proxy 拦截的是整个对象，所以新增属性、数组索引赋值、Map/Set 等原生结构都能天然响应，而 Vue 2 需要额外处理。

依赖收集：每个属性都有自己的“联系人本”

每个响应式属性背后都关联一个 Dep（依赖容器），它就像一个小型通讯录：

vue-component-analyzer

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

下载

• 组件首次渲染时，会逐个读取 data 中的属性，触发 getter，当前组件的 Watcher 就被自动记入该属性的 Dep；
• 一个属性可能同时被模板、计算属性、watch 监听，Dep 就把它们全存下来，不区分类型；
• Dep 不做逻辑判断，只负责“登记”和“群发”，轻量又可靠。

Watcher：数据与视图之间的“快递员”

Watcher 是真正执行更新动作的角色，每个组件默认有一个渲染 Watcher：

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

• 创建时主动读一遍 data，完成依赖收集；
• 收到 Dep 通知后，调用 update()，触发虚拟 DOM 重新比对和真实 DOM 更新；
• computed 和 watch 也各自创建 Watcher，只是任务不同：一个缓存计算结果，一个执行副作用逻辑。

Vue 2 与 Vue 3 的关键差异在哪？

不是简单替换 API，而是响应式能力的结构性升级：

• Vue 2 的 defineProperty 只能劫持已存在的属性，新增属性需用 $set；数组通过重写 push/pop 等方法“打补丁”；
• Vue 3 的 Proxy 天然支持动态增删属性、任意索引赋值、甚至 Set/Map 等集合类型；
• Vue 3 还引入了 effect / track / trigger 抽象模型，把依赖收集逻辑从 Watcher 解耦出来，更利于组合式 API（如 reactive、ref）复用。