Proxy 是底层拦截机制，可全面代理对象所有操作；Object.defineProperty 仅能劫持已有属性，无法拦截新增属性、delete、in、for...in 等；Proxy 通过 handler 覆盖完整 trap 列表实现真正响应式。
JavaScript Proxy 不是语法糖，也不是“更高级的对象写法”，它是一个底层拦截机制——只要你需要在读取、赋值、删除、遍历等操作发生时**介入并自定义行为**，就必须用 Proxy，没有替代方案。
为什么直接改对象属性不行？Proxy 和 Object.defineProperty 的根本区别
很多人想“监听对象变化”，第一反应是用 Object.defineProperty。但它只能拦截已存在的属性，对新增属性、delete、in、for...in、Reflect.ownKeys 等完全无能为力。
Proxy 是对整个对象的代理，所有操作都走 handler，覆盖完整 trap 列表：
-
get/set：读/写属性（包括嵌套访问） -
has：拦截in操作符 -
deleteProperty：拦截delete obj.key -
ownKeys：控制Object.keys、for...in返回哪些键 -
apply/construct：分别代理函数调用和new调用（适用于代理函数）
换句话说：Object.defineProperty 是“给已有属性装门铃”，Proxy 是“给整栋楼装安保系统”。
最简可用的响应式代理示例：捕获 get 和 set
下面这个例子不做依赖收集，只演示如何让每次读写都可追踪：
const target = { count: 0 };
const handler = {
get(obj, prop, receiver) {
console.log(`[get] ${prop}`);
return Reflect.get(obj, prop, receiver);
},
set(obj, prop, value, receiver) {
console.log(`[set] ${prop} = ${value}`);
return Reflect.set(obj, prop, value, receiver);
}
};
const proxy = new Proxy(target, handler);
proxy.count; // [get] count
proxy.name = 'test'; // [set] name = test
注意两点：
- 必须用
Reflect.get/Reflect.set转发操作，否则会丢失原型链或this绑定 -
receiver参数是触发本次操作的原始对象（比如proxy），在处理super或原型访问时关键
容易踩的坑：代理对象不能被 === 原对象比较，且不继承原对象的 constructor
这是最常被忽略的语义断裂点：
-
proxy === target永远是false，哪怕内容一模一样 -
proxy.constructor是Object，不是target.constructor（除非你在get中手动代理constructor） - JSON 序列化时，
JSON.stringify(proxy)默认只走toJSON或默认行为，不会触发ownKeys/get—— 所以你得显式处理toJSON方法或用structuredClone（仅现代环境） - 代理数组时，
push/pop等
方法内部会多次触发
get（如读length）、set，性能敏感场景需节流或缓存
真正难的不是写一个 Proxy，而是决定哪些操作要拦截、哪些要透传、哪些要改写语义——比如 Vue 3 的 reactive 就在 get 中做了递归代理，在 set 中触发依赖更新，在 ownKeys 中过滤 Symbol 键。这些逻辑不在 Proxy API 里，而在你的 handler 里。
