当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptProxy实现响应式数据思路解析

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

2026-02-15 16:28:02 0浏览收藏

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

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

要使用 JavaScript 的 Proxy 实现一个响应式数据层，核心思路是拦截对象的读取和修改操作，在数据变化时自动触发更新。这正是 Vue 3 响应式系统的基础机制。下面一步步说明如何实现一个简易但实用的响应式系统。

1. 使用 Proxy 拦截 get 和 set 操作

Proxy 可以包装一个对象，拦截它的属性访问（get）和赋值（set）。我们利用这一点来追踪依赖和触发更新。

基本结构如下：

2. 收集依赖与触发更新

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

实现一个简单的 effect 函数来注册副作用：

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学习网公众号，一起学习编程~