data-*属性读取失败主因是命名不合法或类型处理错误：必须小写、数字、连字符，禁用大写/下划线；dataset返回字符串需显式转换；setattribute修改不更新dataset，应统一用getattribute兜底；值须加引号防解析异常。
data-*属性值读不到，先查命名是否合法
浏览器只解析符合规范的data-*属性：前缀后必须是小写字母、数字或连字符（-），不能含大写、下划线、点号或空格。写成data-userId或data_user_id，DOM 解析时直接忽略，element.dataset.userId必然返回undefined——这不是 JS 错了，是 HTML 根本没被当成 data 属性。
常见合规写法：
-
data-order-id→ JS 中读作element.dataset.orderId -
data-api-endpoint→element.dataset.apiEndpoint -
data-2024-start-date→ 必须用element.dataset["2024StartDate"]（点语法不支持数字开头）
连续连字符如data-foo--bar会被转成fooBar，语义模糊，建议避免。
dataset读出来是字符串，别当布尔/数字直接用
dataset返回的永远是字符串，哪怕你在 HTML 里写的是data-active="true"或data-count="42"，JS 拿到的也是"true"和"42"。直接写if (el.dataset.active === true)或el.dataset.count + 1，结果一定是错的。
正确处理方式：
- 布尔判断：
el.dataset.active === "true"或JSON.parse(el.dataset.active)（需确保值为合法 JSON 字符串） - 数值转换：
Number(el.dataset.count)或parseInt(el.dataset.count, 10) - 空值判断：
el.dataset.foo === ""而不是!el.dataset.foo（因为"0"、"false"也会被转为 false）
setAttribute写入后 dataset 不更新？这是设计使然
element.dataset.xxx = "new"只是修改内存中 dataset 对象的副本，不会同步更新 DOM 属性节点。刷新页面、重新渲染或调用el.outerHTML时，原始 HTML 的data-xxx值仍保持不变。
真正持久化写入的唯一可靠方式是：
- 设置：
element.setAttribute('data-xxx', 'value') - 删除：
element.removeAttribute('data-xxx') - 读取优先用
element.dataset.xxx（语义清晰），但若之前混用过setAttribute，dataset可能缓存旧值，此时应统一用getAttribute('data-xxx')兜底
特别注意：dataset不是双向绑定，它只是 DOM 初始化时的一次性映射。
值被截断、变00、解析成数学表达式？检查引号和类型
所有data-*属性值**必须加引号**。不加引号会导致解析器误判：data-date=2024-07-15会被当作减法运算，算出2002；data-id=SKU-2026-X7可能在连字符处截断，只取到SKU-2026。
另外，18位字符串（如用户 ID）作为data-值，在某些老旧库（如 SUI Mobile）中可能因 JavaScript 数字精度问题被转成科学计数法或末两位变00——这不是浏览器行为，而是第三方 JS 库内部用Number()强转导致的。解决方案只有一个：始终把 data 值当字符串传，别让它进任何隐式类型转换路径。
安全读取姿势：
- 用
getAttribute('data-xxx')而非dataset.xxx，避开驼峰转换与类型干扰 - 服务端渲染 JSON 字符串时，必须 HTML 实体编码，否则
JSON.parse(el.getAttribute('data-config'))易报错 - 含前后空格或换行符的值，
dataset会自动trim()，getAttribute才返回原始字符串
最常被忽略的一点：data 属性不是状态容器，它只适合存初始化就确定、后续极少变更的元信息。频繁改、监听、依赖它做权限或计数逻辑，迟早掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
