mutationobserver 的变动过滤分两层：配置层用 attributefilter、subtree 等预筛减少记录生成；回调内基于 target、type、dataset 做语义判断，并同步完成逻辑，避免额外微任务或死循环。

MutationObserver 的变动过滤不是靠“在微任务里再做一次筛选”，而是把过滤逻辑直接写在回调函数里——因为回调本身就在微任务中执行，此时 DOM 变更已落地，状态可信，正是做精准判断的最佳时机。

配置层过滤：用 attributeFilter、subtree 等缩小监听范围

浏览器在生成 MutationRecord 前就完成第一道过滤，不产生无关记录，省去后续判断开销：

• 只监听关键属性：attributeFilter: ['data-component-id', 'data-props']，避免 class/style 变更触发无意义回调
• 新增节点才响应：childList: true + subtree: true 覆盖整个画布，但不监听文本或注释节点（它们不会出现在 addedNodes 中，除非显式开启 characterData）
• 属性变更需旧值比对：attributeOldValue: true，方便在回调中判断 data-props 是否真有变化

回调内过滤：基于 target、type、dataset 做语义级识别

配置只能粗筛，真实业务场景中仍需运行时判断，例如区分框架内部临时节点与用户真实组件：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 检查是否为有效组件节点：node.nodeType === 1 && node.dataset.componentId
• 只处理新增（非更新或删除）：mutation.type === 'childList' && mutation.addedNodes.length > 0
• 合并同一父容器的多条记录：new Set(mutations.map(m => m.target)) 提取唯一根节点，避免重复初始化

避免冗余微任务：别在回调里再套 Promise.then

回调已在微任务队列中，再写 Promise.resolve().then(() => { ... }) 不仅没提速，反而可能打乱执行顺序、延迟响应：

• 所有读取、判断、挂载逻辑都应同步完成，比如遍历 addedNodes → 过滤出带 data-component-id 的元素 → 执行 mount
• 如需与 Vue/React 响应式系统协同，用 this.$nextTick（Vue 2）或 nextTick（Vue 3）封装视图更新，而非调度新微任务
• 若要防抖跨宏任务的连续操作（如拖拽中高频插入），应在 observer 外层用 setTimeout 或 debounce 封装回调，而非干预微任务本身

配合 DOM 修改：先断连，再改，后重连

回调中修改被观察的 DOM 会再次触发 observer，导致死循环。安全做法是：

• 进入回调第一句就调用 observer.disconnect()
• 完成所有计算和必要 DOM 补充（如加 placeholder、补 class）
• 最后调用 observer.observe(target, config) 恢复监听