代理模式通过Proxy对象拦截目标对象的操作，实现数据绑定、访问控制、日志记录和缓存优化。1. Vue 3利用Proxy实现响应式系统，自动追踪依赖并更新视图；2. 可限制敏感属性访问，如保护配置信息；3. 支持无侵入式日志监控，便于调试；4. 实现懒加载与结果缓存，提升性能。核心在于解耦访问与业务逻辑，增强可维护性，但应避免过度使用导致性能或调试问题。
JavaScript中的代理模式（Proxy Pattern）通过Proxy对象对其他对象的操作进行拦截和控制，常用于在访问目标对象前添加额外逻辑。它不改变原对象行为，而是提供一层控制接口。以下是几个经典应用场景：
1. 数据绑定与响应式系统
现代前端框架如Vue 3使用代理模式实现数据的响应式更新。通过拦截对象属性的读取和赋值操作，自动触发视图更新。
说明：- 当访问某个属性时，收集依赖（谁在使用这个值）
- 当属性被修改时，通知所有依赖进行更新
- 相比以前的
Object.defineProperty，Proxy能监听动态新增属性和数组变化
const data = { count: 0 };
const proxy = new Proxy(data, {
get(target, key) {
console.log(`获取 ${key}`);
return target[key];
},
set(target, key, value) {
console.log(`设置 ${key} 为 ${value}`);
target[key] = value;
// 触发视图更新
updateView();
return true;
}
});
2. 属性访问控制
限制对某些敏感属性的访问或修改，比如只读字段、私有属性模拟等。
说明：- 可以阻止外部代码删除关键属性
- 对未授权访问返回默认值或抛出错误
- 适合用于配置对象、用户权限管理等场景
const config = { apiKey: 'secret', debug: true };
const protectedConfig = new Proxy(config, {
get(target, key) {
if (key === 'apiKey') throw new Error('禁止访问 apiKey');
return target[key];
},
set(target, key, value) {
if (key === 'apiKey') throw new Error('禁止修改 apiKey');
target[key] = value;
return true;
}
});
3. 日志记录与调试
在不侵入业务逻辑的前提下，监控对象的操作行为，便于调试和性能分析。
立即学习“Java免费学习笔记（深入）”；
说明：- 记录属性何时被读写
- 统计方法调用次数或耗时
- 开发环境中启用，生产环境可关闭
function trackAccess(obj, name) {
return new Proxy(obj, {
get(target, key) {
console.log(`${name}.${key} 被读取`);
return target[key];
},
set(target, key, value) {
console.log(`${name}.${key} 被设置为`, value);
target[key] = value;
return true;
}
});
}
4. 缓存与懒加载
代理可以延迟真实对象的创建，或缓存方法调用结果，提升性能。
说明：- 首次访问时才初始化昂贵资源
- 重复请求直接返回缓存结果
- 适用于API调用、图片加载等场景
let expensiveData;
const apiProxy = new Proxy({}, {
get(_, prop) {
if (!expensiveData) {
console.log('正在加载数据...');
expensiveData = fetchData(); // 模拟异步加载
}
return expensiveData[prop] || null;
}
});
基本上就这些。代理模式的核心价值在于解耦访问逻辑与业务逻辑，让程序更具扩展性和可维护性。实际使用时注意不要过度代理，避免带来调试困难或性能损耗。
