最可靠的方式是用 setattribute 修改 data-* 属性，因为 dataset 赋值仅更新运行时缓存，不会同步到 dom 属性节点，调试时 outerhtml 或 devtools 看不到变化。
用 setAttribute 修改 data-* 属性最可靠
直接改 dataset 不会同步到 DOM 属性节点，调试时用 el.outerHTML 或 DevTools 看不到变化——它只是运行时缓存。真正要让属性值“写进 HTML 字符串”，必须用 setAttribute。
-
el.setAttribute('data-user-id', '789')→ DOM 中真实生成data-user-id="789" -
el.dataset.userId = '789'→ JS 里能读到，但el.getAttribute('data-user-id')可能仍为空或旧值 - 若需同时更新 dataset 和 DOM，建议先
setAttribute，再手动触发逻辑（如重读dataset）
dataset 赋值只适合内部状态映射，别依赖它写入 HTML
dataset 是浏览器提供的命名规范化桥接层，不是 DOM 属性的镜像。它把 data-foo-bar 自动转成 fooBar，但写入时不会反向同步到 attribute 节点。
- 写
el.dataset.theme = 'dark'，HTML 里data-theme不一定变 - 读
el.dataset.theme拿到的是字符串，"true"≠true，"123"≠123，得自己转类型 - 连字符命名必须严格：写
data-user-id才有dataset.userId；写data-user_id或dataUserId都拿不到
监听 data-* 变更要用 MutationObserver，且配置不能省
想在 data-status 改变时自动响应？attributeChangedCallback 只对自定义元素有效，普通元素得靠 MutationObserver，但它默认不监听 data-*——漏配就静默失效。
- 必须同时设
attributes: true和childList: true（哪怕你只关心父节点） -
attributeFilter: ['data-status', 'data-loaded']必须小写、全列、不能用通配符 - 要读旧值？得加
attributeOldValue: true，否则mutation.oldValue永远是undefined - 只监听
setAttribute('data-status', ...)，不监听dataset.status = ...（后者不触发 mutation）
jQuery 里优先用 .data()，但注意它和原生行为不一致
jQuery 的 .data() 不是简单包装 dataset，它带缓存、自动类型转换、驼峰映射，和原生 DOM 行为有差异——混用容易出 bug。
-
$(el).data('userId')可能返回数字1024，而el.dataset.userId一定是字符串"1024" -
$(el).data('status', 'done')不会修改data-status属性，只存在 jQuery 内部缓存中 - 如果后端或别的脚本依赖
getAttribute('data-status')，别用.data()写值 - 读取时优先用
.data()，写入 DOM 属性时回归.attr('data-status', 'done')
实际修改 data 属性时，最容易被忽略的是：你改的到底是不是 HTML attribute 节点本身。dataset、.data()、甚至某些框架的绑定指令，都可能绕过真实 attribute，导致 CSS 选择器、MutationObserver、服务端渲染一致性全部失效。真要“动态修改内容”，从 setAttribute 开始最稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
