利用proxy和Reflect实现数据响应式，核心是拦截对象操作并自动执行副作用。通过get拦截进行依赖收集，set拦截触发更新通知，结合effect函数与track、trigger机制，可构建轻量高效的响应式系统。该方案支持动态属性监听和数组变更，是vue 3响应式原理的基础，适用于状态管理、模板更新等场景。
在 javaScript 中实现数据响应式，核心思路是“监听数据变化，自动执行副作用”。借助 es6 的 Proxy 和 Reflect，我们可以精准拦截对象的操作，从而构建一个轻量但高效的响应式系统。
Proxy 拦截对象操作
Proxy 可以包装一个对象，允许我们拦截其读取、写入等行为。比如，当访问某个属性时，我们可以触发“依赖收集”；当修改属性时，触发“更新通知”。
以下是一个简单的响应式示例：
const reactive = (obj) => { return new Proxy(obj, { get(target, key, receiver) { // 收集依赖（此处可结合 effect 函数） 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); // 触发更新 update(); return result; } }); };
Reflect 保证正确的行为
在 Proxy 中使用 Reflect，能确保默认行为的正确性，比如 this 指向、返回值一致性等。例如，用 Reflect.get 而不是 target[key]，可以避免原型链访问丢失 receiver（即代理本身）的问题。
立即学习“Java免费学习笔记（深入）”；
常见搭配如下：
- 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 函数就会重新执行。
总结与应用场景
利用 Proxy 和 Reflect 实现响应式，是 Vue 3 响应式系统的核心原理。相比 Object.defineProperty，Proxy 更强大：能监听动态新增属性、数组下标变化、支持整个对象代理。
这种模式适用于构建状态管理库、模板响应式更新、计算属性等场景。掌握它，有助于深入理解现代前端框架的工作机制。
基本上就这些，不复杂但容易忽略细节。关键是理解依赖收集和触发更新的时机。