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) 恢复监听
