MutationObserver 的微任务执行策略如何保证 DOM 同步更新

MutationObserver 在宏任务结束后、渲染前以微任务执行回调，此时DOM已同步更新完毕，可安全读取最新状态；它批量合并变更、避免中间态，适合响应式框架协同更新。

MutationObserver 的微任务执行策略本身并不“保证 DOM 同步更新”，而是天然适配 DOM 更新后的响应时机——它不干预 DOM 更新，而是在浏览器完成一批同步 DOM 变更后、渲染前，用微任务精准介入。

回调在微任务中，但 DOM 已经改完了

当你调用 element.appendChild() 或 el.classList.add() 这类方法时，DOM 修改是同步立即生效的。MutationObserver 不会等你写完代码才去“监听”，而是在当前宏任务末尾，把本次所有变更打包进一个 mutations 列表，放进微任务队列。也就是说：

• 所有同步 DOM 操作都已完成，真实 DOM 树已反映最新状态
• 回调执行时读到的 mutation.target、mutation.addedNodes 等，都是当前真实、最新的节点引用
• 你不需要“等 DOM 更新”，因为 DOM 早就更新好了——你只是在它刚更新完、浏览器还没重绘前，拿到快照并响应

批量合并 + 单次微任务，避免中间态干扰

连续多次 DOM 修改（比如循环插入 5 个节点），不会触发 5 次回调，而是合并为一次微任务执行。这带来两个关键保障：

• 语义完整：你能一次性拿到全部新增节点，而不是逐个处理导致逻辑割裂（例如组件挂载依赖父容器完整结构）
• 时机稳定：微任务在宏任务结束后、渲染前执行，既避开阻塞，又确保 DOM 状态确定，不会出现“读到一半更新”的中间态

不主动改 DOM，就不用操心同步问题

如果你只是读取、收集、初始化（如绑定事件、解析 schema），那完全无需额外协调——DOM 已就位，直接用即可。但若要在回调里再改 DOM：

• 必须先 observer.disconnect()，否则可能触发新一轮观察，造成循环或重复
• 修改后可选择立即 observe() 恢复监听，或延后到下一轮（比如用 queueMicrotask 封装）
• 切忌在回调里再套 Promise.then——它已是微任务，嵌套只会打乱时序，还可能跨帧读到旧状态

配合 Vue/React 时，靠 nextTick 对齐响应式节奏

当 MutationObserver 捕获到框架外插入的节点（如第三方插件挂载），要让视图响应，不能直接操作 DOM，而应触发框架更新：

• Vue 中调用 this.$nextTick(() => { /* 更新 data */ })（v2）或 await nextTick()（v3）
• React 中可配合 useEffect 或 flushSync（需谨慎），确保 DOM 变更与 state 更新协同
• 本质是把“外部 DOM 变更”转化为框架内部的一次响应式更新，由框架统一调度批处理