MutationObserver 回调本身在微任务中执行，应直接同步处理 mutations，避免冗余 Promise.then；需批量聚合、去重、合并语义；修改 DOM 前先 disconnect，处理完再 observe；配合 Vue/React 时用 nextTick 封装以协同响应式更新。
MutationObserver 回调本身就在微任务中执行，所以“利用微任务完成更新”不是额外调度微任务，而是在回调内合理组织逻辑，避免阻塞、重复或冲突，让微任务的天然优势真正落地。
回调内直接处理，别再套 Promise.then
回调已处于微任务队列，再写 Promise.resolve().then(() => { ... }) 是冗余嵌套，既无性能收益，还可能打乱执行时序。真实 DOM 变更刚结束，此时正是响应的最佳窗口——直接遍历 mutations，做判断、取节点、初始化组件，全部同步完成即可。
例如低代码画布中新增组件：
- 检查
mutation.type === 'childList'且mutation.addedNodes.length > 0 - 遍历
addedNodes，过滤出带data-component-id的元素节点 - 对每个有效节点执行挂载逻辑（绑定事件、渲染 schema、触发校验）
批量聚合后统一处理，不逐条响应
浏览器会把同一轮宏任务中的多次 DOM 变更合并进一次回调，mutations 数组里可能有十几条记录。不要为每条 mutation 单独跑一套初始化流程，而应先归类、去重、合并语义：
- 把所有新增节点收集到一个 Set 或数组中，统一注册事件代理
- 对属性变更按
attributeName分组，比如多个data-props更新可合并做一次 schema diff - 用
new Set(mutations.map(m => m.target))快速提取唯一受影响根节点，避免重复处理同一父容器
需要改 DOM？先断开再重连
回调中修改被观察的 DOM，会再次触发 MutationObserver，极易陷入无限循环。最稳妥的做法是：
- 进入回调第一句就调用
observer.disconnect() - 完成所有读取、计算、必要 DOM 修改（如补 class、加 placeholder）
- 最后再调用
observer.observe(target, config)恢复监听
这样既保证了本次响应完整，又不会污染下一轮变更队列。
配合 Vue/React 时，用 nextTick 封装而非替代
在 Vue 生态中，MutationObserver 常用于监听框架外插入的节点（如插件注入、第三方组件挂载）。这时回调内不直接操作视图，而是触发 Vue 的响应式更新：
- 调用
this.$nextTick(() => { /* 更新 data 或调用 method */ })（Vue 2） - 或使用
await nextTick()后执行triggerRef()/update()（Vue 3） - 目的是让 DOM 变更与 Vue 的 patch 流程协同，而不是绕过它
