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>}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 可能带来额外开销，合理做惰性代理或跳过只读对象
以上就是javascript Proxy是什么_如何用它实现数据响应式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544714.html
微信扫一扫 
支付宝扫一扫 
