响应式系统通过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 -> effectsconst 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 响应式的基础。不复杂但容易忽略细节。
以上就是JavaScript响应式原理实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533505.html
微信扫一扫 
支付宝扫一扫 
