使用Proxy和Reflect实现数据响应式_javascript技巧_技术教程

利用Proxy和Reflect实现数据响应式，核心是拦截对象操作并自动执行副作用。通过get拦截进行依赖收集，set拦截触发更新通知，结合effect函数与track、trigger机制，可构建轻量高效的响应式系统。该方案支持动态属性监听和数组变更，是Vue 3响应式原理的基础，适用于状态管理、模板更新等场景。

在 JavaScript 中实现数据响应式，核心思路是“监听数据变化，自动执行副作用”。借助 ES6 的 Proxy 和 Reflect，我们可以精准拦截对象的操作，从而构建一个轻量但高效的响应式系统。

Proxy 拦截对象操作

Proxy 可以包装一个对象，允许我们拦截其读取、写入等行为。比如，当访问某个属性时，我们可以触发“依赖收集”；当修改属性时，触发“更新通知”。

以下是一个简单的响应式示例：

Reflect 保证正确的行为

在 Proxy 中使用 Reflect，能确保默认行为的正确性，比如 this 指向、返回值一致性等。例如，用 Reflect.get 而不是 target[key]，可以避免原型链访问丢失 receiver（即代理本身）的问题。

常见搭配如下：

get 拦截读取，用 Reflect.get 返回原值
set 拦截赋值，用 Reflect.set 写入并返回布尔值
has 拦截 in 操作符，配合 Reflect.has
deleteProperty 拦截 delete，用 Reflect.deleteProperty

实现简易的响应式更新机制

结合一个副作用函数（effect）和更新函数（update），可以实现自动响应变化：

let activeEffect = null; const effect = (fn) => { activeEffect = fn; fn(); // 立即执行一次，触发 get 收集 activeEffect = null; }; const targetsMap = new WeakMap(); const track = (target, key) => { if (!activeEffect) return; let depsMap = targetsMap.get(target); if (!depsMap) { depsMap = new Map(); targetsMap.set(target, depsMap); } let dep =

depsMap.get(key); if (!dep) { dep = new Set(); depsMap.set(key, dep); } dep.add(activeEffect); }; const trigger = (target, key) => { const depsMap = targetsMap.get(target); if (depsMap) { const dep = depsMap.get(key); if (dep) { dep.forEach(effect => effect()); } } }; // 修改 reactive 的 get 和 set 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; } }); };

现在，当你在 effect 中读取响应式对象的属性，它会被自动追踪。一旦该属性被修改，effect 函数就会重新执行。