Vue响应式本质是数据劫持，通过Object.defineProperty（Vue 2）或Proxy（Vue 3）拦截读写操作，自动收集依赖（Dep）并通知Watcher更新视图。
Vue 响应式数据劫持，本质是“让数据自己开口说话”——当它被读或被改时，主动通知依赖它的视图或逻辑去更新。不用手动监听、不用反复轮询，靠的是对数据访问行为的精准拦截和自动关联。
数据劫持：给属性装上“读写感应器”
Vue 2 用 Object.defineProperty 给每个 data 属性重写 getter 和 setter：
-
getter：属性被读取（比如模板里写
{{ msg }}）时触发，此时悄悄记下“谁正在用我”（即当前 Watcher）； -
setter：属性被修改（比如执行
this.msg = 'hello'）时触发，立刻通知所有记下的 Watcher：“我变了，快更新！”
这就像在每扇门上装了传感器：开门（读）时登记访客，关门（写）时广播通知访客离场。
依赖收集：每个属性都有自己的“联系人列表”（Dep）
每个响应式属性背后都对应一个 Dep 实例，它是一个简单的容器，专门存着依赖它的 Watcher：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 组件首次渲染时，会逐个读取 data 中的属性 → 触发 getter → 当前组件的 Watcher 被自动加入该属性的 Dep；
- 一个属性可能被多个地方使用（如模板、计算属性、watch），Dep 就负责把它们全收进来；
- Dep 不关心 Watcher 是什么，只管“登记”和“群发”。
Watcher：连接数据与视图的“快递员”
Watcher 是响应式系统的执行单元，每个组件实例默认有一个渲染 Watcher：
- 它在创建时会主动读一遍 data，触发 getter，完成依赖收集；
- 收到 Dep 的通知后，它执行
update()方法，重新渲染 DOM 或计算新值； - computed 和 watch 内部也各自创建 Watcher，只是目的不同（缓存计算结果 / 执行副作用）。
Vue 3 的升级：从“单扇门传感器”到“整栋楼智能安防”
Vue 3 改用 Proxy 替代 defineProperty，解决了几个硬伤：
- 新增属性（
obj.newKey = 1）也能响应 —— Proxy 拦截的是整个对象，不是单个 key； - 数组索引赋值（
arr[0] = 99）直接生效 —— 不再依赖重写 push/pop 等方法； - Map/Set 原生支持 —— 通过函数劫持（如重写
map.get）实现精准依赖追踪。
Proxy 不是“补丁式增强”，而是从架构上让响应式更自然、更完整。
