dataset属性名必须全小写加连字符（如data-user-id），驼峰（data-userid）或下划线（data-user_name）等不合规命名会被浏览器忽略，导致dataset.userid返回undefined且不报错。
dataset属性名为什么一写驼峰就失效
因为浏览器根本没把 data-userId 或 data-user_name 当作合法的 data-* 属性——它只识别全小写 + 连字符的命名，比如 data-user-id。写错格式，DOM 解析阶段就直接忽略，dataset.userId 自然返回 undefined，且不报错。
常见无效写法：
-
data-userId（驼峰）→ 浏览器无视，dataset.userId读不到 -
data-user_name（下划线）→ 部分浏览器能映射但 IE 和 SSR 框架（如 Next.js）会丢弃 -
data-1id（数字开头）→ 不合法，必须用方括号访问：dataset["1id"] -
data-api-url-v2→ 映射为apiUrlV2，但data-api--url（双连字符）也会变成apiUrl，语义丢失
怎么安全读取含特殊字符或不规范命名的 data 属性
当遇到下划线、点号、连续短横线、或空格前后值时，dataset 就靠不住了，必须降级用原生 API。
- 属性名含下划线：
el.getAttribute('data-user_name')（dataset.user_name一定undefined） - 值含换行或首尾空格：
dataset.desc会自动trim()，要原始值就得用getAttribute('data-desc') - 服务端渲染输出 JSON：
getAttribute('data-config')返回原始字符串，再JSON.parse()；注意 HTML 实体编码问题，否则易 SyntaxError - IE11 对连字符转驼峰有 bug（
data-user-id的dataset.userId可能取不到），此时统一用getAttribute更稳
dataset赋值后 DOM 没更新？别信“看起来生效了”
element.dataset.foo = "bar" 看似改成功了，其实只是操作了一个内存映射副本，原始 HTML 的 data-foo 属性并没变——刷新页面就丢数据，MutationObserver 也监听不到。
- 真正写入 DOM 必须用：
el.setAttribute('data-foo', 'bar') - 删属性：
el.removeAttribute('data-foo') - 混用危险：
dataset.foo = 'a'后再setAttribute('data-foo', 'b')，后续dataset.foo仍返回'a'（缓存未刷新） - CSS 选择器如
[data-foo="bar"]只匹配真实 DOM 属性，不认 dataset 的“幻影更新”
遍历所有 data 属性时 for...in 为啥啥也拿不到
dataset 是 DOMStringMap，不是普通对象，for...in、Object.keys()、Object.entries() 全部失效——它不继承自 Object.prototype。
- 兼容性最稳方式：
Array.from(el.attributes).filter(attr => attr.name.startsWith('data-'))，再手动提取name和value - 现代写法（Chrome 84+/Firefox 68+）：
Object.fromEntries(Array.from(el.dataset, ([k, v]) => [k, v]))，但 Safari 旧版不支持 - 动态拼接键名时，必须用方括号：
el.dataset[camelCaseKey]，不能写el.dataset.camelCaseKey - 判断属性是否存在，用
'key' in el.dataset，而不是el.dataset.key != null（空字符串也是真值）
实际开发里最容易被忽略的，是命名合规性与类型转换这两层——前者让 JS 根本读不到值，后者让逻辑在看似正常时悄悄出错。写完 HTML 一定要打开控制台打印 el.dataset 确认字段存在，再做任何逻辑判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
