答案：使用 Proxy 拦截 get 和 set 实现响应式，通过 track 收集依赖、trigger 触发更新，结合 effect 注册副作用函数，数据变化时自动重新执行依赖函数，实现视图自动更新。
要使用 JavaScript 的 Proxy 实现一个响应式数据层，核心思路是拦截对象的读取和修改操作，在数据变化时自动触发更新。这正是 Vue 3 响应式系统的基础机制。下面一步步说明如何实现一个简易但实用的响应式系统。
1. 使用 Proxy 拦截 get 和 set 操作
Proxy 可以包装一个对象，拦截它的属性访问（get）和赋值（set）。我们利用这一点来追踪依赖和触发更新。
基本结构如下：
const data = { name: ‘Alice’, age: 20 }; const reactive = (obj) => { return new Proxy(obj, { get(target, key, receiver) { // 收集依赖：哪个属性被访问了 console.log(`读取属性: ${key}`); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { // 触发更新：属性被修改 console.log(`设置属性: ${key} = ${value}`); const result = Reflect.set(target, key, value, receiver); // 这里可以通知视图更新 updateView(); return result; } }); };
2. 收集依赖与触发更新
真正的响应式需要知道“谁在使用这个数据”，也就是依赖收集。我们可以用一个全局变量临时存储正在执行的副作用函数（例如渲染函数）。
立即学习“Java免费学习笔记（深入）”；
实现一个简单的 effect 函数来注册副作用：
let activeEffect = null; const effect = (fn) => { activeEffect = fn; fn(); // 立即执行一次，触发 get，从而收集依赖 activeEffect = null; }; const targetMap = new WeakMap(); // 存储每个对象的依赖 const reactive = (obj) => { return new Proxy(obj, { get(target, key, receiver) { const depKey = `${target}-${key}`; let deps = targetMap.get(depKey); if (!deps) { deps = new Set(); targetMap.set(depKey, deps); } if (activeEffect) { deps.add(activeEffect); // 收集当前 effect 作为依赖 } return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver); const depKey = `${target}-${key}`; const deps = targetMap.get(depKey); if (deps) { deps.forEach(effect => effect()); // 触发所有依赖更新 } return result; } }); };
3. 完整示例：响应式数据 + 自动更新
结合上面逻辑，写一个完整可运行的例子：
// 响应式函数 const reactive = (obj) => { return new Proxy(obj, { get(target, key, receiver) { track(target, key); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver); trigger(target, key); return result; } }); }; // 依赖收集 const targetMap = new WeakMap(); const track = (target, key) => { if (!activeEffect) return; const depsMap = targetMap.get(target) || new Map(); if (!depsMap.has(key)) { depsMap.set(key, new Set()); } depsMap.get(key).add(activeEffect); targetMap.set(target, depsMap); }; // 触发更新 const trigger = (target, key) => { const depsMap = targetMap.get(target); if (!depsMap) return; const effects = depsMap.get(key); if (effects) { effects.forEach(effect => effect()); } }; let activeEffect = null; const effect = (fn) => { activeEffect = fn; fn(); // 执行一次以收集依赖 activeEffect = null; }; // 使用示例 const state = reactive({ count: 0, name: ‘Bob’ }); effect(() => { console.log(‘视图更新:’, `Hello ${state.name}, count is ${state.count}`); }); // 修改数据，自动触发更新 state.count++; // 输出：视图更新: Hello Bob, count is 1 state.name = ‘Charlie’; // 输出：视图更新: Hello Charlie, count is 1
这样就实现了一个极简但完整的响应式系统。当数据变化时，所有依赖它的副作用函数都会自动重新执行。
基本上就这些。你可以在此基础上扩展：支持嵌套对象、数组、深度监听、计算属性等。Proxy 的强大之处在于它能拦截几乎所有操作，为构建现代前端框架提供了坚实基础。
以上就是怎样使用 JavaScript 的 Proxy 实现一个响应式数据层？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/29645.html
微信扫一扫 
支付宝扫一扫 
