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 变更”转化为框架内部的一次响应式更新，由框架统一调度批处理
