Proxy 是 JavaScript 中唯一能拦截并自定义对象基本操作的机制；它通过 handler 对象定义 get、set 等拦截函数，需显式实现逻辑，否则透传；无法自动深度代理嵌套对象，且必须用 Reflect 委托默认行为以避免语义破坏。
Proxy 不是语法糖，也不是可选的包装器——它是 JavaScript 中唯一能拦截并自定义对象基本操作（比如读取、赋值、in 判断、函数调用）的机制。 没有 Proxy，你就无法真正“监听”一个普通对象的 obj.x 访问，也无法让 delete obj.y 返回 false 或触发副作用。
代理对象的核心：handler 里写拦截逻辑
创建 Proxy 必须传入两个参数：目标对象（target）和处理器对象（handler）。handler 是个普通对象，键名是固定的操作名（如 get、set、has、apply），每个键对应一个拦截函数。
常见错误是把 handler 写成空对象：new Proxy(obj, {}) —— 这不会报错，但所有操作都透传，等于没代理。必须显式定义要拦截的行为。
-
get(target, prop, receiver)：拦截读取。注意第三个参数receiver通常是 proxy 本身，用于正确绑定this（尤其在访问 getter 时） -
set(target, prop, value, receiver)：拦截赋值。必须返回true才算成功，否则抛TypeError -
has(target, prop)：拦截prop in proxy，返回布尔值 -
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)等，必须返回数组，且内容需与getOwnPropertyDescriptor一致
为什么不能直接代理普通对象做响应式？
Vue 2 的响应式基于 Object.defineProperty，而 Vue 3 改用 Proxy，根本原因在于能力边界：
-
Object.defineProperty无法监听属性新增或删除（obj.newProp = 1或delete obj.x） -
Proxy可以通过set和deleteProperty拦截这两类操作 - 但
Proxy无法 deep 代理嵌套对象——你代理了obj，但obj.nested还是原生对象，除非手动递归代理（或用Reflect.get+ 判断返回值是否 object 再 wrap） -
Proxy代理的是引用，不是值；对数组索引赋值（arr[0] = 1）能被set拦截，但arr.push()这类方法调用需单独在get中拦截并包装方法
实际用法示例：带校验的只读视图
下面这个例子创建一个“只读 + 类型校验”的代理，对数字字段强制转为 number，非数字则拒绝写入：
const data = { count: 0, name: 'test' };
const validatedReadOnly = new Proxy(data, {
set(target, prop, value) {
if (prop === 'count' && typeof value !== 'number') {
console.warn(`count must be number, got ${typeof value}`);
return false; // 拦截失败
}
if (Object.isFrozen(target)) return false;
target[prop] = value;
return true;
},
deleteProperty() {
return false; // 完全禁止 delete
}
});
注意：这里没实现 get，所以读取仍走原逻辑；但如果你希望读取时也转换类型（比如把 '123' 自动转成 123），就得加 get 并用 Reflect.get 做默认行为委托。
Proxy 的陷阱不在语法，而在它的“透明性”——它看起来像原对象，但行为可能被任意篡改；一旦 handler 里忘了用 Reflect.xxx 委托默认行为（比如在 get 里漏掉 return Reflect.get(...)），就容易导致功能丢失或 this 绑定异常。真正难的从来不是写一个 Proxy，而是确保它在所有边界场景下不破环原有语义。
