data属性必须用小写字母和短横线命名，如data-user-id；驼峰或下划线命名会导致dataset读取为undefined；dataset自动将短横线转驼峰（data-api-url→apiurl），纯数字开头需getattribute；值均为字符串，需手动解析布尔、json和数值；不宜存放大量结构化数据。
data属性必须用小写字母和短横线命名
HTML 的 data- 属性是自定义参数的唯一标准方式，但浏览器只认符合规范的命名：只能小写，单词间用短横线（data-user-id），不能驼峰（data-userId）或下划线（data_user_id）。否则 JavaScript 读取时会返回 null 或 undefined。
常见错误现象：element.dataset.userId 总是 undefined，但检查 DOM 发现属性确实存在——八成是命名不合规。
-
data-modal-type="confirm"✅ 可用 -
data-modalType="confirm"❌dataset.modalType读不到 -
data-modal_type="confirm"❌ 下划线会被忽略，变成modal键
dataset API 会自动转换短横线为驼峰
JavaScript 通过 element.dataset 读取时，浏览器把短横线后的字母自动转大写，生成驼峰式键名。这是固定映射规则，不是可配置行为。
例如：data-api-url → dataset.apiUrl，data-user-preference → dataset.userPreference。注意首字母永远小写，哪怕原始属性是 data-URL，也会变成 dataset.url。
- 写 HTML 时用
data-api-key，JS 里就用el.dataset.apiKey - 写
data-x-y-z，JS 里是dataset.xYz（不是xyz） - 纯数字开头的属性如
data-2024-version无法通过dataset访问，得用getAttribute('data-2024-version')
布尔值、JSON 字符串要手动解析
data- 属性值全是字符串类型，即使你写了 data-active="true" 或 data-config='{"timeout":500}'，JS 读出来仍是字符串，不会自动转布尔或对象。
容易踩的坑：直接拿 dataset.active === true 判断，结果永远是 false；或者对 dataset.config 调用 .map() 报错。
- 布尔判断写成：
el.dataset.active === 'true'或Boolean(el.dataset.active)（注意后者对空字符串也返回false） - JSON 字符串必须显式解析：
JSON.parse(el.dataset.config)，且要包try/catch - 数值建议用
Number(el.dataset.delay)或一元加号+el.dataset.delay，避免隐式转换出错
不要在 data 属性里塞大量结构化数据
data- 属性设计初衷是轻量上下文参数，比如按钮对应哪个弹窗 ID、列表项的排序权重、是否启用调试模式。如果需要传整个用户对象或渲染模板，说明职责错位了。
性能与可维护性风险：HTML 体积膨胀、服务端渲染时难以校验格式、前端解析成本上升、调试时 DevTools 里 DOM 树变得臃肿难读。
- 适合：
data-item-id="123"、data-sort-order="desc"、data-track-event="click_signup" - 不适合：
data-user='{"name":"Alice","roles":[...], "settings":{...}}' - 替代方案：用
<script type="application/json"></script>块，或初始化时通过 API 拉取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
