微任务聚合是Vue和React实现高效DOM更新的关键机制，通过将同一事件循环中的多次状态变更合并为一次视图更新，利用微任务队列（如Promise.then）在宏任务结束后立即批量执行，避免重复渲染。
微任务聚合是 Vue 和 React 实现高效 DOM 更新的关键机制，核心在于把同一事件循环中多次状态变更“攒起来”，只触发一次视图更新。它不依赖手动节流或防抖，而是由框架底层自动完成，重点在于理解其触发条件和如何配合使用。
微任务队列是批处理的执行载体
Vue 使用 Promises.then 或 MutationObserver（降级用 setTimeout）将更新任务推入微任务队列；React 在 Concurrent 模式下也倾向在微任务阶段调度高优先级更新。微任务的特点是：当前宏任务（如 click 事件、脚本执行）结束后立即清空整个微任务队列，再进行渲染。这保证了所有被收集的更新能赶在浏览器重绘前合并执行。
- 同一个 click 回调里连续调用 5 次
setState或修改 5 个响应式属性，最终只生成一个虚拟 DOM diff 和一次真实 DOM patch - 若误用宏任务（如
setTimeout(..., 0)），更新会被拆到下一轮事件循环，失去聚合效果，导致多次渲染 - Vue 的
nextTick就是显式暴露这一机制的接口——它把回调也塞进同一微任务队列末尾，确保 DOM 已更新完毕
避免破坏聚合的常见操作
不是所有异步操作都走微任务，一旦跳出框架调度节奏，批处理就会失效。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在
setTimeout、setInterval、原生fetch回调、addEventListener中直接调用setState或赋值响应式数据，会脱离批量上下文（React 17+ 已对事件处理器自动批量，但对定时器/网络回调仍不批量） - Vue 中使用
this.$forceUpdate()或Vue.set不影响队列机制，但它们本身不参与去重，频繁调用仍可能触发多余更新 - 在 computed 或 watch 内部同步修改其他响应式数据，只要仍在同一事件循环内，依然会被纳入当前批处理
主动配合微任务聚合的实践方式
不需要改写框架逻辑，只需在关键节点顺应它的节奏。
立即学习“前端免费学习笔记（深入）”；
- 需要读取更新后 DOM 时，统一用
nextTick（Vue）或flushSync+useEffect（React，慎用）来等待批处理完成 - 批量初始化或重置多个状态，优先使用单次对象赋值（Vue 的
Object.assign(this.$data, newData)）或 React 的setState({a, b, c})，比多次单独调用更易被识别为关联更新 - 复杂表单联动场景，可借助
Promise.resolve().then(() => {...})手动包裹一组状态变更，强制归入下一个微任务批次（等效于轻量级nextTick）
Vue 与 React 微任务策略的差异点
两者目标一致，但实现重心不同：
- Vue 的调度器（Scheduler）更强调“确定性”：默认所有同步变更都进同一微任务批次，通过队列去重 + 组件更新排序（父→子）保障一致性
- React 的 Lane 模型更强调“可中断性”：高优更新（如用户输入）插队进微任务，低优更新（如列表滚动）可被暂停或跳过，批处理粒度更细、更动态
- 开发中感知最明显的是：Vue 的
nextTick总是等“本次所有更新结束”，而 React 的useEffect可能在某次更新中途就触发（尤其开启startTransition后）
