响应式系统通过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 响应式的基础。不复杂但容易忽略细节。
