怎样使用 JavaScript 的 Proxy 实现一个响应式数据层？-js教程-PHP中文网

怎样使用 JavaScript 的 Proxy 实现一个响应式数据层？

夜晨

发布： 2025-10-03 21:39:02

原创

465人浏览过

答案：使用 Proxy 拦截 get 和 set 实现响应式，通过 track 收集依赖、trigger 触发更新，结合 effect 注册副作用函数，数据变化时自动重新执行依赖函数，实现视图自动更新。

怎样使用 javascript 的 proxy 实现一个响应式数据层？

要使用 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 函数来注册副作用：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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 实现一个响应式数据层？的详细内容，更多请关注php中文网其它相关文章！