Vue vs React

Vue 响应式更新 vs React 状态更新

更新流程比较

Vue 响应式更新

1. 数据源：ref 或 reactive ……

2. 依赖收集：getter 追踪“谁读了我”

3. 触发更新：setter 通知依赖

4. 调度器：合并、去重

5. 微任务批处理：在下一个 tick 异步更新组件

   备注：这里是 nextTick 的执行时机

6. 执行 patch：比对新旧虚拟 DOM，最小化更新

React 状态更新

1. 数据源：useState 或 useReducer ……

2. 显示调用：setState 或 dispatch ……

3. 调度器：在事件/异步边界 自动批处理

   flushSync：强制立即执行 Render + Commit

4. render 阶段：自顶向下构造新树

5. commit 阶段：比对新旧虚拟 DOM，最小化更新

小结

特性	Vue 响应式更新	React 状态更新
触发方式	getter、setter 隐式更新	setState 显式更新
批处理机制	以 微任务 为边界批量更新	在 事件/异步任务 中统一自动批处理，并可用 flushSync 手动强制刷新
更新粒度	默认 组件级别 更新	自顶向下 渲染，需配合 memo 等 API 优化以实现精准更新