MutationObserver 是唯一能可靠实时跟踪 data-* 属性变化的原生方案，因其需 attributes: true 与 childList: true 共存、目标节点必须已挂载、属性名须合法（如 data-user-id）、attributeFilter 大小写精确匹配，且 attributeOldValue: true 才能获取旧值。
MutationObserver 是唯一能可靠实时跟踪 data-* 属性变化的原生方案，轮询或重写 setter 都不可靠且有严重副作用。
为什么 data-* 变了但监听不到？
常见现象是：代码里执行了 el.dataset.userId = '123' 或 el.setAttribute('data-user-id', '123')，但 MutationObserver 回调没触发。根本原因不是 API 失效，而是配置漏项：
-
attributes: true单独使用会静默失败——必须搭配childList: true或characterData: true（哪怕你只关心属性） - 目标节点为
null或未挂载到文档（el.isConnected === false），监听直接无效 - 用了非法命名，如
data_user_id（下划线）或dataUserId（驼峰），浏览器忽略，不触发变更 -
attributeFilter拼写错误或大小写不匹配：'data-user-id'✅，'dataUserid'❌
MutationObserver 监听 data-* 的最小可行配置
以下配置可稳定捕获 data-status、data-loaded 等合法属性变更，并拿到新旧值：
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName.startsWith('data-')) {
const el = mutation.target;
const attr = mutation.attributeName;
const oldValue = mutation.oldValue; // 仅当 attributeOldValue: true 时有值
const newValue = el.getAttribute(attr);
console.log(`[data] ${attr} changed on`, el, `from "${oldValue}" → "${newValue}"`);
}
});
});
observer.observe(targetElement, {
attributes: true,
childList: true, // 必须和 attributes 共存
subtree: false, // 仅监听 target 自身，不进子树
attributeFilter: ['data-status', 'data-loaded', 'data-component-id'],
attributeOldValue: true // 不开就拿不到 oldValue
});
注意：subtree: false 表示只监听目标元素自身的 data-* 变更；若需监听其内部动态插入的节点（如 Vue 渲染后新增的 <div data-loaded="true">），则必须设为 <code>true。
容易被忽略的边界点
几个实际调试中高频出问题的细节：
立即学习“前端免费学习笔记（深入）”；
-
dataset赋值会触发监听，但el._data = {...}这类 JS 对象属性操作完全无感——MutationObserver只响应 DOM attribute 层面变更 - 用
element.classList.add()或element.style.color = 'red'不会触发data-*监听，除非你也在attributeFilter里加了'class'或'style' - 回调中不要同步修改被监听的属性（如又调一次
setAttribute），否则可能引发死循环；需节流或先observer.disconnect()再改 - 组件卸载时务必调用
observer.disconnect()，否则内存泄漏，且后续同名节点监听可能错乱
