mutationobserver回调不触发最常见原因是配置漏项或目标节点失效：需显式调用observe()且target必须真实存在；监听class/style需用setattribute而非property赋值；childlist监听需注意subtree和removednodes处理；attributefilter与attributeoldvalue须配合使用以避免性能问题。
为什么 MutationObserver 回调完全不触发
最常见原因是配置漏项或目标节点失效。只写 new MutationObserver(callback) 不够，必须显式调用 observer.observe(target, config)；如果 target 是 document.getElementById('xxx') 但元素还没挂载（比如 Vue 的 setup() 里提前查），target 就是 null，observe() 不报错但静默失败。
另一个高频坑：监听 document.body 或 document —— Safari 旧版本不稳定，应锁定具体容器，如 #app 或 .content。
- 检查
target是否真实存在：console.log(target)确认非null - 确保
observe()在 DOM 挂载后执行（Vue 用onMounted，React 用useEffect） - 避免监听顶层节点，改用业务容器节点
监听 class 或 style 属性变化总收不到回调
因为 el.className = 'active' 和 el.style.color = 'red' 修改的是 DOM property，不是 HTML attribute，MutationObserver 默认不捕获。只有 setAttribute('class', ...) 或 removeAttribute('style') 这类操作才会触发 attributes: true 监听。
data-* 属性是唯一“天然适配”的类型：无论用 setAttribute('data-id', '123') 还是 el.dataset.id = '123'，底层都走 attribute 接口，必触发。
- 要监听
class，必须用el.setAttribute('class', ...)，不能依赖classList.add() - 想响应
classList操作，得封装或改用Proxy，MutationObserver 本身无解 - 在
attributeFilter中写'class'，不是'className' - 大小写敏感：
data-user-id对应dataset.userId，但mutation.attributeName拿到的是'data-user-id'
childList: true 为什么只监听到新增、没反应删除
childList: true 本身就能同时捕获 addedNodes 和 removedNodes，不需要额外开关。问题常出在回调处理逻辑里：被删节点已脱离文档树，removedNodes[0].offsetHeight 会是 0，.querySelector 会返回 null，直接读取可能报错或误判为空。
另外，childList: true 默认只监听目标节点的**直接子节点**。如果动态插入发生在深层嵌套里（比如 #list > .item > span 被替换），而你只观察 #list 且没开 subtree: true，就收不到。
- 回调中立刻缓存被删节点：
const nodes = Array.from(mutation.removedNodes) - 区分新增/删除：检查
mutation.type === 'childList'后，看mutation.addedNodes.length和mutation.removedNodes.length - 需要监听后代节点变动时，必须加
subtree: true，否则深层插入无效 - 仅监听一级列表增删（如评论区
.comment），关掉subtree更轻量
怎么精准监听几个关键属性又不拖慢页面
不设 attributeFilter 会监听所有属性变更，包括框架频繁修改的 class、style、id，导致回调爆炸；不设 attributeOldValue: true，则 mutation.oldValue 永远是 undefined，无法比对是否真变了。
性能损耗主要来自监听范围和回调频率，而非 MutationObserver 本身。开 subtree: true + attributes: true 却没过滤，等于让浏览器每帧扫一遍整个子树的所有属性。
- 只监听真正关心的属性：
attributeFilter: ['data-status', 'disabled', 'aria-expanded'] - 必须加
attributeOldValue: true才能拿到旧值，否则比对逻辑失效 - 若目标只是防篡改（如支付按钮），把
target锁死到那个元素，别监听父容器 - 修复属性后记得先
observer.disconnect()，再setAttribute()，最后重新observe()，避免循环触发
#app，结果被轮播图自动切换 class 淹没；或者想监听某个弹窗的 data-open，却忘了它由框架动态挂载，observe() 调得太早。这些都不是 API 写错了，而是目标节点生命周期和监听策略没对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
