Vue 3 的 reactive 通过 Proxy 实现响应式，支持深层监听、动态增删属性、数组索引赋值及 Map/Set 等结构，采用懒代理、依赖收集与触发更新闭环机制。
Vue 3 的 reactive 通过 Proxy 实现对象的响应式劫持，而非 Vue 2 的 Object.defineProperty。它能天然支持深层监听、动态属性增删、数组索引赋值、Map/Set 等原生数据结构，核心在于递归代理 + 依赖收集 + 触发更新的闭环机制。
Proxy 拦截对象操作，替代 defineProperty 的局限
Vue 2 中 Object.defineProperty 无法监听属性新增、删除、数组下标赋值（如 arr[0] = x）和 length 变更。而 reactive 使用 Proxy 拦截 13 种操作，关键包括：
-
get：读取属性时触发依赖收集（track） -
set：设置属性时触发更新通知（trigger） -
has、deleteProperty、ownKeys：支持in、delete、for...in、Object.keys()等操作的响应式 -
getOwnPropertyDescriptor和defineProperty：确保Object.getOwnPropertyDescriptor等元操作也受控
Proxy 对象本身不可遍历（无自有属性），因此 Vue 内部用一个“代理壳”包裹原始对象，所有访问都经由拦截器中转。
深层响应靠递归 reactive，不是一次性代理全部嵌套
reactive 并不会在初始化时递归代理所有嵌套对象，而是采用懒代理（lazy proxy）策略：
立即学习“前端免费学习笔记（深入）”；
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 仅当某个嵌套属性被
get访问时，才检查其值是否为对象/数组等可响应类型 - 若是，则调用
reactive()递归处理，返回一个新的 Proxy，并缓存到内部 WeakMap（key 是原始对象，value 是对应 Proxy） - 后续再次访问同一对象，直接复用已创建的 Proxy，避免重复代理
例如：const state = reactive({ user: { profile: { name: 'Alice' } } })。初始只代理 state；当执行 state.user.profile.name 时，依次触发 user 的 get → 代理 user → profile 的 get → 代理 profile。
依赖收集与触发更新基于 effect 栈和 targetKey Map
响应式依赖关系不是绑定在对象上，而是由当前激活的 effect（副作用函数）驱动：
-
get拦截器中，若当前存在活跃 effect（通过全局activeEffect变量获取），则将该 effect 添加到target（原始对象）和key（访问属性名）对应的依赖集合中（存储于targetMap：WeakMap -
set拦截器中，从targetMap查找对应key的所有 effect，依次执行（即触发更新） - 对数组索引赋值、
push、pop等操作，会同时触发'length'和'__ob__'（或 Symbol 类型标记）等特殊 key 的依赖，保证视图正确更新
这种设计解耦了数据和视图，使响应式系统可独立使用（如配合 computed、watch），也支持多层嵌套变更的精准通知。
边界情况处理：非响应式值、只读、原始类型穿透
reactive 有明确约定和防护逻辑：
- 只代理对象、数组、Map、Set、WeakMap、WeakSet；原始类型（string/number/boolean/null/undefined）直接返回，不代理（这也是为什么不能对 ref.value 做 reactive）
- 已代理过的对象再次传入
reactive，直接返回缓存 Proxy（利用 WeakMap 缓存） - 对
readonly包裹的对象，Proxy 的set、deleteProperty等会静默失败或抛出警告（开发模式） - Symbol 属性默认也被代理（除非是 Vue 内部私有 Symbol，如
ReactiveFlags.IS_REACTIVE）
这些保障了响应式行为的可预测性，也避免意外代理造成性能或语义问题。
