响应式系统通过proxy拦截数据操作，利用track和trigger实现依赖收集与更新。当读取属性时收集副作用函数，修改属性时触发对应更新，结合effect建立响应式联系，从而自动同步数据与视图。
javaScript响应式系统的核心是数据变化能自动触发视图更新。实现这一机制的关键在于“监听数据变化”和“依赖收集与派发更新”。目前主流框架如vue 2.x使用Object.defineProperty，Vue 3则改用Proxy来实现响应式。下面通过一个简化版的实现帮助理解其原理。
1. 使用 Proxy 拦截对象操作
Proxy 可以代理整个对象，拦截 get、set、delete 等操作，比 Object.defineProperty 更强大。
示例代码：
function reactive(target) { return new Proxy(target, { get(obj, key) { // 收集依赖（谁在读这个属性） track(obj, key); return Reflect.get(obj, key); }, set(obj, key, value) { // 触发更新（属性变化后通知更新） const result = Reflect.set(obj, key, value); trigger(obj, key); return result; } }); }
2. 依赖收集与更新触发
当读取属性时记录当前副作用函数（如渲染函数），当属性变化时重新执行这些函数。
定义两个核心函数 track 和 trigger：
// 存储依赖关系：target -> key -> effects const targetMap = new WeakMap(); function track(target, key) { if (!activeEffect) return; // 没有正在执行的副作用 let depsMap = targetMap.get(target); if (!depsMap) { depsMap = new Map(); targetMap.set(target, depsMap); } let dep = depsMap.get(key); if (!dep) { dep = new Set(); depsMap.set(key, dep); } dep.add(activeEffect); // 收集当前 effect } function trigger(target, key) { const depsMap = targetMap.get(target); if (!depsMap) return; const dep = depsMap.get(key); if (dep) { dep.forEach(effect => effect()); } }
3. 副作用函数与响应式执行
使用 effect 函数包装需要响应式的操作，比如页面渲染。
立即学习“Java免费学习笔记（深入）”；
实现一个简单的 effect 函数：
let activeEffect = null; function effect(fn) { const effectFn = () => { activeEffect = effectFn; fn(); // 执行函数，触发 getter，从而收集依赖 activeEffect = null; }; effectFn(); // 立即执行一次 return effectFn; }
使用示例：
const state = reactive({ count: 0 }); effect(() => { console.log('count 更新了:', state.count); }); state.count++; // 输出: count 更新了: 1
4. 完整流程梳理
响应式系统的执行流程如下：
- 调用 reactive 创建响应式对象，通过 Proxy 拦截 get/set
- 执行 effect 函数时，将回调赋值给 activeEffect
- 读取属性触发 get，track 收集 activeEffect 到依赖集合
- 修改属性触发 set，trigger 遍历并执行所有依赖函数
基本上就这些。虽然实际框架中还有调度器、计算属性、嵌套对象处理等优化，但核心思想一致：依赖追踪 + 自动更新。理解 Proxy + effect + 依赖收集，就掌握了现代 javascript 响应式的基础。不复杂但容易忽略细节。