data-* 属性必须全小写加连字符命名，否则 dataset 静默失效；dataset 自动转驼峰有严格规则，值恒为字符串，敏感信息禁用，不可替代状态管理或样式控制。
data-* 属性命名写错，JS 就读不到，不是报错，是静默失效——el.dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="1001"，问题就出在命名规则上。
data-* 属性名必须全小写 + 连字符，否则 dataset 根本不认
浏览器在 DOM 解析阶段就过滤掉非法命名的 data-* 属性，不会进 dataset 对象，也不会触发任何警告。
-
data-user-id✅ 正确，el.dataset.userId可取值 -
data-userId❌ 无效，el.dataset.userId是undefined -
data-User-ID❌ 同样无效，哪怕渲染到页面上也取不到 -
data-user_id⚠️ 部分浏览器能转成userId，但 IE 和 Next.js SSR 会直接丢弃
dataset 自动转驼峰有固定规则，不能靠“猜”
不是简单删掉短横线再大写首字母，而是每个短横线后第一个字母都大写，且要避开保留前缀（如 xml、html）。
-
data-api-url→el.dataset.apiUrl（不是apiUrl，也不是apiurl） -
data-xml-ns→el.dataset.xmlNs（xml是保留前缀，ns单独大写） -
data-last-modified-at→el.dataset.lastModifiedAt（每段都转） -
data-1id❌ 数字开头不合法，dataset不支持，只能用getAttribute('data-1id')
值永远是字符串，存对象必须手动 JSON 序列化
dataset 不做类型推断，赋值数字、布尔或对象，都会被自动转成字符串，读出来还是字符串——不手动解析，直接用会出 bug。
-
el.dataset.count = 42→ 实际存的是"42"，不是数字 -
el.dataset.config = { theme: "dark" }→ 存成"[object Object]"，完全不可用 - 正确写法：
el.dataset.config = JSON.stringify({ theme: "dark", timeout: 3000 }) - 读取时必须判空：
const config = el.dataset.config ? JSON.parse(el.dataset.config) : {}
别把 data-* 当状态管理或样式开关用
data-* 是只读“信息口袋”，不是响应式状态源。它不触发重绘，也不该承担逻辑控制职责。
- 不要用
data-active="true"控制按钮高亮——该用class="is-active"或aria-pressed - 不要用
data-loaded="1"判断资源加载完成——该监听load事件或用Promise - 敏感信息如 token、手机号、用户邮箱，绝不能放
data-*——所有内容明文暴露在 HTML 源码里 - SSR 场景下，服务端生成的
data-*值必须和客户端初始状态一致，否则 hydration 会失败
最常被忽略的一点：命名一旦写错，JS 读不到，但 HTML 里看起来“好像没问题”。查不到值时，先看属性名是否全小写+连字符，再看 dataset 键名是否符合驼峰转换规则——别在 JSON 解析或异步逻辑里兜圈子找问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
