data-*属性短横线转驼峰规则是：去掉data-前缀，短横线后首字母大写，其余字母小写，如data-user-id→userid；含大写字母、下划线或非法字符的命名将被浏览器忽略，dataset中不可见。
data-* 属性名里的短横线怎么转成 JS 可读的驼峰？
浏览器自动把 data-user-id 这类带短横线的属性名，转成 dataset.userId —— 不是简单删掉短横线，而是把每个短横线后的第一个字母大写，其余全小写。比如：
-
data-api-endpoint→dataset.apiEndpoint -
data-last-login-time→dataset.lastLoginTime -
data-foo--bar（两个短横）→dataset.fooBar（中间短横被合并处理，语义易歧义，别这么写）
注意：大小写敏感。写成 data-userId 或 data-UserID，浏览器压根不认，dataset.userId 永远是 undefined。
为什么 dataset.userId 读不到，但 HTML 里明明写了 data-user-id？
常见原因不是 JS 写错了，而是 DOM 解析阶段就失败了。检查这几点：
- HTML 中属性名是否含大写字母？
data-userId❌ 浏览器直接忽略，DevTools 的 Elements 面板里都看不到该属性 - 是否用了下划线？
data_user_id❌ 在 IE 和 Next.js 等 SSR 环境中会被丢弃，dataset.user_id不可用，必须用getAttribute('data_user_id') - 值里有空格且没加引号？
data-user-name=john doe会被截断为data-user-name="john"，后面doe变成孤立文本 - 属性名以数字开头？
data-2024-year✅ 合法，但只能用dataset["2024Year"]访问，dataset.2024Year语法错误
dataset.xxx = 'value' 为什么改不生效？
dataset 是只读代理对象，不是双向绑定。它只是 DOM 解析时的一次性映射，修改它不会同步到真实属性节点：
- ✅ 正确写入：
el.setAttribute('data-user-id', '123') - ❌ 无效写入：
el.dataset.userId = '123'—— 页面刷新后还原，el.outerHTML里还是旧值 - ⚠️ 混用危险：
el.dataset.userId = 'a'后再setAttribute('data-user-id', 'b')，dataset.userId仍返回'a'，而getAttribute('data-user-id')返回'b'
读取优先用 dataset.xxx（语义清晰），写入必须走 setAttribute，二者不能交叉使用。
遇到空格、JSON、布尔值怎么安全处理？
dataset 暴露的永远是字符串，且会自动 trim() 前后空白。这些细节最容易漏：
- 布尔判断别写
if (el.dataset.isActive)——"false"也是真值；应写el.dataset.isActive === "true" - 数字别直接
+ el.dataset.count—— 字符串拼接风险；用Number(el.dataset.count)或一元加号+el.dataset.count - 存 JSON？必须手动
JSON.parse(el.dataset.config || "{}")，且加try/catch，服务端未 HTML 实体编码会导致SyntaxError - 值含换行或前后空格？
dataset会抹掉，要原始值必须用getAttribute('data-xxx')
真正难的不是命名规则，而是所有转换都静默发生：错命名不报错、类型错不报错、混用 API 也不报错——只在某个交互环节突然 undefined 或拼接出奇怪字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
