MutationObserver监听data-*属性需同时配置attributes: true与childList: true或characterData: true，否则静默失效；仅设attributes: true会抛TypeError；必须操作Element节点的合法attribute（如setAttribute），且targetNode不能为null，attributeFilter需小写全列、subtree和attributeOldValue按需启用，避免循环触发与性能问题。
为什么data-*属性变了但MutationObserver没触发？
根本原因不是监听器失效，而是配置漏了关键项：attributes: true必须和childList: true或characterData: true至少一项共存，否则直接抛TypeError。只写{ attributes: true }会静默失败——浏览器不报错但也不监听。
另外，data-*本身是合法 HTML attribute，所以它天然适配，但前提是：目标节点得是Element（不能是Text或Document），且你得用setAttribute('data-id', '123')或dataset.id = '123'这类方式修改；如果直接改el._dataId = '123'这种 JS 对象属性，MutationObserver 完全无感。
- 检查
targetNode是否为null：比如在 Vuesetup()里直接document.getElementById('x')，DOM 还没渲染就查，结果是null -
data-user_id这种带下划线的写法不合法，浏览器会忽略，必须用连字符data-user-id - 回调中读
mutation.attributeName拿到的是原始名'data-user-id'，不是'userId'，别拿dataset.userId去比对
attributeFilter和attributeOldValue怎么配才不白设？
不加attributeFilter会监听所有属性变更（包括class、style这些高频变动项），容易拖慢性能；不设attributeOldValue: true，回调里的mutation.oldValue永远是undefined，且不会报错——你会误以为“没变”，实际是配置漏了。
典型安全配法：
立即学习“前端免费学习笔记（深入）”；
{
attributes: true,
childList: true,
subtree: true,
attributeFilter: ['data-status', 'data-loaded', 'data-component-id'],
attributeOldValue: true
}
-
attributeFilter必须是小写字符串数组：'data-status'✅，'dataStatus'❌ - 想监听
data-user-id和data-user-name，就得全列出来，通配符不支持 -
attributeOldValue: true开销极低，但不开就真拿不到旧值——比如判断data-status是否从"pending"变成"done"时必须依赖它
监听data-*变化时，subtree: true到底要不要开？
取决于你的目标节点是不是广告/组件容器本身。如果只监听#app自身data-属性，subtree: false（默认）就够了；但若想捕获它内部任意层级动态插入的节点所带的data-属性（比如框架注入的<div data-loaded="true">），就必须开subtree: true。
常见误判：把document.body当万能目标。旧版 Safari 对它监听不稳定，且subtree: true开在body上等于监听整个页面，性能差、噪音多。更稳妥的是锁定具体容器，比如document.getElementById('canvas-container')。
- 只监听目标元素自己身上的
data-→subtree: false - 要捕获子树中任何新插入节点的
data-→subtree: true+childList: true（因为新增节点属于childList变更） - 监听前 DOM 已有
data-节点？MutationObserver 不回溯，得手动扫描一次：observer.takeRecords()+ 主动遍历
回调里处理data-*变更，哪些操作容易引发循环或崩溃？
在回调中直接改被监听节点的data-属性（比如node.setAttribute('data-status', 'processed')），会再次触发同一 observer 的回调，形成无限循环。更隐蔽的问题是：删掉removedNodes里的节点后，再调用.querySelector()会返回null，因为它们已脱离文档树。
- 修改前先
observer.disconnect()，处理完再observe()恢复（适合单次标记场景） - 需要批量响应时，用
Array.from(mutation.addedNodes)立刻缓存引用，别等后续逻辑再访问node的parentElement或offsetHeight - 避免在回调里做耗时操作（如大量 DOM 查询或计算），微任务虽不阻塞主线程，但堆积太多仍影响帧率
- 匹配
data-节点时，优先用node.matches('[data-status]')，而不是遍历node.attributes——前者快且语义清晰
最常被忽略的一点：监听启动前发生的data-变更，MutationObserver 一概不捕获。初始化逻辑里记得补一手主动扫描。
