data- 属性名必须全小写加连字符，否则 js 读不到；dataset 是驼峰映射视图，getattribute 返回原始字符串；dataset 赋值不更新 dom，需 setattribute；data- 值恒为字符串，需手动类型转换。
data-* 属性名写错，JS 就读不到
浏览器只认严格符合规范的 data-* 名：前缀 data- 后必须全小写 + 连字符（-），不能有大写字母、下划线、点号或数字开头。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里写了 data-userId="123" —— 实际上这个属性压根没被解析进 DOM，不是“读不到”，是“根本不存在”。
-
data-user-id✅ → JS 中读作element.dataset.userId -
data-api-url✅ →element.dataset.apiUrl -
data-2024-start✅ → 必须用element.dataset["2024Start"]（点号语法不支持数字开头） -
data_user_id❌、data-userId❌、data-UserID❌ —— 全部无效
dataset.userId 和 getAttribute("data-user-id") 到底该用哪个
二者行为不同，选错会埋坑：前者是 DOM 解析后生成的驼峰映射视图，后者是原始字符串快照。
推荐按场景选：
- 读取服务端渲染（SSR）或框架初始输出的静态值 → 用
getAttribute("data-user-id")，它不依赖 DOM 解析阶段，更可靠 - 属性名含下划线（如
data-user_id）或大写字母 →dataset完全忽略，只能用getAttribute("data-user_id") - 需要原始字符串（比如带前导空格、换行、JSON 格式未 parse）→
getAttribute直接返回，不加工 - 高频读写且确定环境 ≥ IE11 →
dataset.userId可读性好，但注意它不自动更新类型
dataset 赋值不会真正写入 DOM 属性
element.dataset.foo = "bar" 看似能改值，实际只是操作内存中的映射副本；刷新页面后，HTML 源码里的 data-foo 还是旧值。
真正要持久化、让 getAttribute 或 CSS 选择器看到新值，必须调用：
-
element.setAttribute("data-foo", "bar")（推荐） -
element.removeAttribute("data-foo")删除属性
混用风险高：dataset.foo = "a" 后再 setAttribute("data-foo", "b")，dataset.foo 仍返回 "a"，而 getAttribute("data-foo") 返回 "b" —— 两个值已不一致。
data-* 值永远是字符串，别信自动类型转换
哪怕 HTML 里写 data-active="false" 或 data-price="9.99"，dataset.active 拿到的仍是字符串 "false"，dataset.price 是 "9.99"。
常见误判：
-
if (el.dataset.active)对"false"也返回true（非空字符串为真） -
el.dataset.count + 1得到"51"而不是6（字符串拼接）
正确做法：
- 数字 →
Number(el.dataset.price)或+el.dataset.price - 布尔 →
el.dataset.active === "true"（别用Boolean()） - JSON → 先
JSON.parse(el.dataset.config)，并包try/catch，因为格式错就静默返回undefined
真正容易被忽略的是：data-* 不是状态容器，它只存字符串。你塞进去什么，它就原样吐出来什么——没人帮你转类型，也没人帮你校验结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
