Vue 3 使用 Proxy 替代 Object.defineProperty 实现响应式，解决了 Vue 2 中无法监听新增/删除属性、数组索引赋值及 length 修改等问题，并通过 get/set 拦截实现依赖收集与触发更新，同时扩展支持 in、deleteProperty 等操作及 Map/Set 等集合类型。
Vue 3 使用 Proxy 替代 Vue 2 的 Object.defineProperty 实现响应式系统，这是响应式机制的一次根本性升级。它解决了旧方案中无法监听对象新增/删除属性、数组索引赋值、数组长度修改等限制，让响应式更自然、更完整。
Proxy 如何拦截数据访问与修改
Proxy 通过包装原始对象，创建一个代理对象，在读取（get）和设置（set）时插入逻辑，从而触发依赖收集和更新通知。
- get 拦截：在访问属性时，自动将当前运行的副作用函数（如组件渲染函数）作为依赖，记录到该属性的依赖集合中（即“依赖收集”）
- set 拦截：在修改属性值时，触发对应依赖集合中的所有函数重新执行（即“触发更新”）
- 对
in操作符、deleteProperty、has、ownKeys等也提供拦截能力，支持for...in、Object.keys()、Reflect.deleteProperty等场景的响应式
为什么 Proxy 能监听数组变化
Vue 2 中用 Object.defineProperty 无法劫持数组下标（如 arr[0] = xxx）或直接修改 length，只能重写数组原型方法（如 push、pop）。Proxy 则可直接拦截：
- 通过
set拦截任意索引赋值（arr[1] = 100） - 通过
set拦截length修改（arr.length = 0） - 通过
get和ownKeys拦截arr.length读取、for...of、Array.from()等行为
Proxy 的局限与 Vue 的补充策略
Proxy 本身不能监听普通对象以外的类型（如 Map、Set、Date、RegExp），也不能自动深度代理嵌套对象——Vue 3 通过递归 reactive 和特殊处理来弥补：
立即学习“前端免费学习笔记（深入）”；
- 对
Map/Set等集合类型，Vue 提供了独立的reactive适配逻辑，劫持其原型方法并重写get/set行为 - 对
null、undefined、原始值（string/number/boolean）不代理，直接返回原值；仅对象、数组、Map、Set 等引用类型被转为响应式 - 使用
ref包裹原始值，内部通过value属性访问，再用 Proxy 或Object.defineProperty（针对低版本兼容）实现响应式
手动使用 Proxy 实现简易响应式（示意）
以下是一个极简版模拟，帮助理解核心逻辑：
const handlers = {
get(target, key, receiver) {
track(target, key); // 依赖收集
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
};
function reactive(obj) {
if (typeof obj !== 'object' || obj === null) return obj;
return new Proxy(obj, handlers);
}
实际 Vue 源码中还包含依赖管理（effect、track、trigger）、嵌套代理、只读控制（readonly）、浅响应（shallowReactive）等完整设计。
