MutationObserver 默认不监听所有属性变化，仅当配置 attributes: true 时才监听元素自身 HTML 属性变更，且 class、style 等反射属性需用 setAttribute 才触发，data-* 属性最适配监听。
MutationObserver 能监听所有属性变化吗
MutationObserver 不是专为属性设计的监听器，它默认只关注 attributes 选项开启时的变更，且仅限于元素自身属性（不包括 classList 或 style 的内部变动）。比如你改了 el.className = 'new'，但没开 attributeFilter: ['class']，它就收不到。
常见错误现象：MutationObserver 回调完全不触发，或只在 setAttribute 时触发，而对 el.id = 'x' 无反应 —— 因为后者属于 DOM 属性赋值，不触发 attribute mutation。
- 必须显式传入
{ attributes: true }才启用属性监听 - 用
attributeFilter: ['data-id', 'disabled']精确过滤，避免无关回调影响性能 -
attributeOldValue: true才能在回调中拿到mutation.oldValue，否则为undefined - 对
class、style这类有“反射属性”的字段，直接改el.className不会触发，得用el.setAttribute('class', ...)
监听 class 变化为什么经常失效
根本原因：class 是个“反射属性”，el.classList.add() 或 el.className = 'a b' 都不会触发 attribute mutation，它们操作的是 DOM 属性层面，而非 HTML attribute 层面。只有 setAttribute('class', ...) 才算真正的 attribute 更改。
使用场景：你想响应 el.classList.toggle('active') 这类调用，就得绕过 MutationObserver，改用 el.classList 的封装或 Proxy 包装。
立即学习“前端免费学习笔记（深入）”；
- 若坚持用
MutationObserver，只能监听setAttribute('class', ...)和removeAttribute('class')这两种路径 - 更实用的做法是：把 class 操作封装成函数，内部手动触发自定义事件，比如
el.dispatchEvent(new CustomEvent('classchange')) - 注意
class在attributeFilter中要写成字符串'class'，不是'className'
监听 data-* 属性最稳妥的写法
data-* 属性是 MutationObserver 最适合监听的类型，因为它们没有反射属性干扰，所有修改都走 attribute 接口。但要注意大小写和连字符转换问题。
参数差异：data-user-id 在 JS 中对应 dataset.userId，但 MutationObserver 的 mutation.attributeName 拿到的是原始名 'data-user-id'，不是 'userId'。
- 监听前务必确认 HTML 中写的是
data-user-id="123"，而不是data-user_id（下划线不合法） - 用
attributeFilter: ['data-user-id', 'data-status']明确指定，避免监听全部属性带来的开销 - 获取新值用
mutation.target.getAttribute(mutation.attributeName)，别依赖dataset，因为 observer 触发时dataset可能尚未更新 - 兼容性没问题：Chrome 26+、Firefox 14+、Safari 6+、Edge 全支持
为什么不用 Object.defineProperty 或 Proxy 监听属性
DOM 元素不是普通 JS 对象，Object.defineProperty(el, 'id', {...}) 会静默失败；Proxy 根本不能代理非对象（如文本节点），也不能代理原生 DOM 元素实例 —— 浏览器直接抛 TypeError: Cannot create proxy with a non-object as target。
性能影响：有人试图用 setInterval 定期轮询 getAttribute，这在高频更新下会导致明显卡顿，尤其在长列表中每个项都这么干。
- 不要尝试给
HTMLElement.prototype加 setter，现代浏览器禁止修改原生原型 - 不要用
getComputedStyle或getAttribute轮询，哪怕间隔 100ms，在 50+ 元素时也容易掉帧 - 唯一通用解法仍是
MutationObserver，配合精准的attributeFilter和节流回调
真正难处理的是那些“看起来像属性变更，实则绕过 attribute 机制”的操作，比如 input.value = 'x'、checkbox.checked = true —— 它们根本不走 attribute，监听不到就是设计如此，不是你漏配了什么。
