用 data-* 属性挂载数据最轻量、最语义化，但必须全小写+连字符命名（如 data-user-id），读取时 dataset 自动转驼峰（userid），且值恒为字符串，需手动转换类型，否则逻辑易出错。
直接说结论：用 data-* 属性挂载数据最轻量、最语义化，但必须严格遵守小写+连字符命名，读取时 dataset 会自动转驼峰，且所有值都是字符串——不手动转换类型，后续逻辑大概率出错。
data-* 属性怎么写才合法？
浏览器只认符合规范的 data-*，写错就静默忽略，JS 里读不到，还不报错，排查起来特别隐蔽。
- 必须全小写，
data-user-id✅，data-userId❌（dataset.userId返回undefined） - 必须含至少一个连字符，
data-id✅，dataabc❌（会被丢弃） - 不能含大写字母、空格、下划线、特殊符号，
data_v1和data-user ID都无效 - 数字可以出现在连字符后，比如
data-v2-url→dataset.v2Url，但老浏览器可能不支持，稳妥起见优先用getAttribute
dataset.userId 读不到值？先查命名和大小写
常见现象：element.dataset.userId 是 undefined，但 element.getAttribute('data-user-id') 能拿到值。这不是 bug，是命名映射规则没对上。
- HTML 中写的是
data-user-id="1001"，JS 里必须用dataset.userId（首字母小写，连字符后字母大写） - 如果属性名是
data-api-endpoint，对应的是dataset.apiEndpoint，不是dataset.endpoint - 遇到带数字或非法字符的命名（如
data-1st-item），dataset可能无法访问，直接切到getAttribute('data-1st-item') - 调试时别看
innerHTML判断值是否生效——dataset是内存映射，改了不会实时反映在字符串里
点击 li 时读 data-bgc 改背景色，为什么点了没反应？
典型场景：给 <li data-bgc="red"> 绑点击事件，想用 dataset.bgc 设置 style.backgroundColor。问题往往出在类型和作用域上。
-
dataset.bgc拿到的是字符串"red"，没问题；但如果 HTML 里写的是data-bgc="255,0,0"，得手动拼成"rgb(255,0,0)"才能用 - 如果用了事件委托（比如
ul上监听，event.target是li里的span），event.target.dataset.bgc就是undefined——得用event.target.closest('li[data-bgc]')找到真正带属性的元素 - 排他逻辑里清空背景色别用
li.style.backgroundColor = ''，某些浏览器会残留内联样式，建议统一用li.style.removeProperty('background-color')
data-* 存对象或布尔值？别图省事
很多人把 JSON 字符串塞进 data-config='{"theme":"dark"}'，然后直接 dataset.config 拿，结果得到的是字符串，不是对象。没人帮你 JSON.parse，也不会报错，只是后续 config.theme 是 undefined。
- 真要存结构化数据，必须显式
JSON.parse(dataset.config)，且包try/catch，因为 HTML 里手误少个引号就崩 - 布尔值更危险：
data-active="false"→dataset.active === "false"，而if (dataset.active)在 JS 里是true（非空字符串）——得写成dataset.active === "true" - 敏感数据（token、手机号、订单明细）绝对不能放
data-*，源码里明文可见，控制台一行$0.dataset.token就暴露
真正容易被忽略的是：它只是 DOM 元素的“标签”，不是状态管理器。你改了 dataset.foo，React/Vue 不知道，CSS 不响应，也不触发任何更新机制——把它当便利贴用，别当数据库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
