data-属性名必须全小写加连字符，否则浏览器忽略；dataset只读映射且返回字符串，新增属性须用setattribute，类型需手动转换。
data-属性名必须全小写加连字符，否则浏览器直接忽略
HTML 中写 data-user-id="105" 是合法的，但 data-userId、data-UserId、data_user_id 都不会被解析为 data-* 属性——DOM 中查不到，dataset.userId 读出来是 undefined，getAttribute('data-userId') 也返回 null。
浏览器只认严格符合规范的命名：前缀 data- + 至少一个字符 + 全小写 + 连字符分隔单词。连字符会在 JS 的 dataset 中自动转为驼峰，比如 data-api-key → dataset.apiKey；但如果你写了 data-apiKey，它压根不会进 dataset，也不出现在 DOM 的 attributes 列表里。
- ✅ 正确：
data-item-id、data-is-active、data-config-url - ❌ 错误：
data-itemId、data-isActive、data-configUrl、data-item_id
设置新 data-属性必须用 setAttribute，不能靠 dataset 赋值
dataset 是只读映射，只能读取或修改**已存在**的 data-* 属性。想动态添加一个全新的 data-* 属性（比如页面加载后才决定要存 data-temp-flag），必须用 setAttribute：
const btn = document.querySelector('button');
btn.setAttribute('data-temp-flag', 'processed');
下面这行代码无效，DOM 上完全不会出现 data-new-prop：
btn.dataset.newProp = 'value'; // 不会生成任何属性
- 静态场景（服务端渲染或写死 HTML）：直接在标签里写，如
<button data-action="save" data-id="7"></button> - 运行时新增属性：只用
setAttribute('data-xxx', value) - 运行时更新已有属性：可以用
dataset.xxx = value，也可以用setAttribute，两者等效
dataset 读取方便但有兼容性和类型陷阱
dataset 提供点语法读取，比反复调用 getAttribute 简洁，但它返回的全是字符串，且 IE11 及更早版本不支持。
比如 HTML 里写 data-count="42" data-active="true"，JS 里拿到的是 "42" 和 "true"，不是数字或布尔值：
const el = document.querySelector('[data-count]');
console.log(typeof el.dataset.count); // "string"
console.log(el.dataset.count === 42); // false
console.log(JSON.parse(el.dataset.active)); // 才能得到 true
- 需要类型转换时，手动用
Number()、JSON.parse()或Boolean()（注意Boolean("false") === true） - 要兼容 IE11？统一用
getAttribute('data-xxx')，它在所有浏览器都可用 - 读取含空格或特殊字符的原始值？
getAttribute更可靠，dataset会做驼峰转换和截断
data-属性值永远是字符串，别指望它自动转类型
无论你在 HTML 里写 data-price="99.9"、data-tags='["a","b"]' 还是 data-config='{"mode":"dev"}'，通过 dataset 或 getAttribute 拿到的都是原样字符串。浏览器不做 JSON 解析、不转数字、不识别布尔字面量。
常见翻车点：
-
if (el.dataset.enabled) { ... }—— 即使值是"false"，条件也成立（非空字符串为真） -
el.dataset.price * 2—— 隐式转数字可能出错，建议显式Number(el.dataset.price) - 嵌套结构建议用
JSON.parse(el.dataset.config)，但得包try/catch
真正容易被忽略的，是连字符命名和类型转换这两层——前者让属性“消失”，后者让逻辑悄悄跑偏。写完记得用开发者工具 Elements 面板看一眼 DOM 上实际有没有那个 data-* 属性，再 console.log 出来确认类型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
