登录
首页 >  文章 >  前端

JavaScriptProxy实现响应式数据思路解析

时间：2026-02-15 16:28:02 126浏览 收藏

本文深入解析了如何利用 JavaScript 的 Proxy 对象实现响应式数据系统——通过拦截 get 操作进行依赖收集、拦截 set 操作触发更新，并结合 effect 函数注册副作用，使数据变化时视图能自动重渲染；示例代码从基础拦截逐步演进到完整的依赖追踪与更新机制，清晰还原了 Vue 3 响应式核心原理，既简洁又具备实战扩展性，是理解现代前端框架响应式底层逻辑的绝佳入门路径。

怎样使用 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. 收集依赖与触发更新

真正的响应式需要知道“谁在使用这个数据”，也就是依赖收集。我们可以用一个全局变量临时存储正在执行的副作用函数（例如渲染函数）。

实现一个简单的 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 的强大之处在于它能拦截几乎所有操作，为构建现代前端框架提供了坚实基础。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>