现代前端框架响应式原理对比：React Fiber vs Vue 3 Proxy

前端主流框架在状态变化驱动 UI 渲染的机制上选择了截然不同的哲学路径。React 采用推导式粗粒度比对方案（Pull/Dirty Checking）。在 React 16 之前，Stack Reconciler 采用递归方式处理虚拟 DOM 树，遇到大型节点树时容易长时间霸占主执行栈，导致动画掉帧和输入响应延迟。Fiber 架构将调用栈重构为由单向链表构成的 Fiber 节点树（child, sibling, return）。每个任务被切分为离散的工作单元，配合浏览器的空闲调度（Scheduler）实现可中断、可恢复的时间切片（Time Slicing），将高优先级的用户交互插队执行。Vue 3 则采用基于元编程的响应式追踪方案（Push/Fine-grained Tracking）。Vue 3 彻底放弃了 Vue 2 的 Object.defineProperty，改用 ES6 Proxy 拦截对象的读写行为。其核心构建在 effect、track、trigger 三部曲之上：JavaScriptconst targetMap = new WeakMap();

function track(target, key) { if (!activeEffect) return; let depsMap = targetMap.get(target); if (!depsMap) targetMap.set(target, (depsMap = new Map())); let dep = depsMap.get(key); if (!dep) depsMap.set(key, (dep = new Set())); dep.add(activeEffect); }

function trigger(target, key) { const depsMap = targetMap.get(target); if (!depsMap) return; const dep = depsMap.get(key); if (dep) dep.forEach(effect => effect()); } Vue 的响应式系统使得组件在挂载时能够精确记录所依赖的属性，当状态改变时能够以最小粒度直接定位到需要重新执行渲染的组件函数，省去了全子树遍历比对的开销。