Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，它通过 handler 拦截 get、set、has、deleteProperty 等关键操作，实现响应式系统；相比 Object.defineProperty，Proxy 支持动态属性、数组索引、完整拦截能力且无需预设字段。
Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，它是实现数据响应式的核心机制之一。 它不修改原对象，而是创建一个“代理”，在访问、赋值、删除等操作发生时插入自定义逻辑——这正是 Vue 3 和许多现代响应式库的底层基础。
Proxy 能拦截哪些关键操作？
通过 handler 对象，你可以捕获对目标对象的各种行为。最常用的是：
- get(target, key, receiver)：读取属性时触发，适合做依赖收集（比如记录谁用到了这个字段）
- set(target, key, value, receiver)：设置属性时触发，适合做更新通知（比如通知视图重新渲染）
- has(target, key)：in 操作符触发，可隐藏或动态控制属性可见性
- deleteProperty(target, key)：delete 操作触发，可用于拦截非法删除
手写一个极简响应式系统（基于 Proxy）
下面是一个能自动触发更新的 reactive 函数，配合 effect 实现依赖追踪：
const depsMap = new WeakMap(); // 存储 {target: Map<key, Set<effect>>}
function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
track(target, key); // 收集当前 effect 依赖
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发所有依赖该 key 的 effect
return result;
}
});
}
function effect(fn) {
activeEffect = fn;
fn(); // 执行一次，触发内部的 get 收集依赖
activeEffect = null;
}
let activeEffect = null;
function track(target, key) {
if (!activeEffect) return;
let deps = depsMap.get(target);
if (!deps) {
deps = new Map();
depsMap.set(target, deps);
}
let effects = deps.get(key);
if (!effects) {
effects = new Set();
deps.set(key, effects);
}
effects.add(activeEffect);
}
function trigger(target, key) {
const deps = depsMap.get(target)?.get(key);
if (deps) deps.forEach(fn => fn());
}
使用示例：
立即学习“Java免费学习笔记（深入）”；
const state = reactive({ count: 0 });
effect(() => {
console.log('count 变了：', state.count); // 初始输出 0
});
state.count++; // 自动触发 effect，输出 "count 变了：1"
为什么 Proxy 比 Object.defineProperty 更适合响应式？
- 支持动态新增/删除属性：defineProperty 必须提前声明所有响应式字段；Proxy 天然监听整个对象，无需预设
- 支持数组索引和 length 变化：defineProperty 对 arr[0] = x 或 arr.push() 无感知；Proxy 的 set 可捕获所有赋值行为
- 可代理整个对象甚至嵌套结构：配合递归 reactive 或 lazy 初始化，轻松实现深层响应式
- 拦截能力更完整：包括 in、for...in、instanceof、函数调用（apply）等，扩展性强
实际使用中的注意事项
- Proxy 返回的是新对象，原对象不受影响，也不具备响应性 —— 务必用代理后的对象
- 不能直接代理原始值（如 number、string），只能代理对象、数组、函数等引用类型
- 注意 this 指向：在 set/get 中若用到 receiver（通常是 proxy 本身），应优先用 Reflect 方法保持语义正确
- 性能敏感场景慎用：过度嵌套或高频触发的 Proxy 可能带来额外开销，合理做惰性代理或跳过只读对象
