dataset.userid总是undefined，根本原因是html中data-*属性名未遵循全小写加连字符规范（如data-user-id），浏览器直接忽略解析；正确写法对应dataset.userid，数字开头需用方括号访问，且值恒为字符串，修改必须用setattribute。
别把 dataset 当成万能读取器——它只对严格符合规范的 data- 属性生效，且读出来全是字符串；想稳定取值，getAttribute() 才是更可控的选择。
为什么 dataset.userId 总是 undefined？
根本不是 JS 写错了，是 HTML 里属性名本身没被浏览器识别。浏览器只解析全小写 + 连字符的 data- 名，其他一律忽略。
-
data-userId、data_user_id、data-UserID全部无效——DOM 中查不到，dataset返回undefined - 正确写法只有：
data-user-id→ JS 中读作element.dataset.userId - 含数字开头（如
data-2024-start）必须用方括号：element.dataset["2024Start"]，点号语法直接报错 - 后端模板拼接时若混用下划线或驼峰，前端永远取不到值，调试时先检查
el.outerHTML确认属性是否真在 DOM 上
getAttribute('data-xxx') 比 dataset.xxx 更可靠
getAttribute() 是底层原生方法，不依赖命名转换逻辑，也不受大小写/数字影响，适合大多数真实场景。
- 当属性名含数字（
data-item-2-id）、大写字母（data-api-Key）或你想保留原始字符串格式时，必须用getAttribute('data-item-2-id') -
dataset会自动把data-api-key转成apiKey，但data-URL会被转成url（全小写），语义丢失 - IE11 不支持
dataset，但支持getAttribute；如果项目还需兼容旧环境，别碰dataset - 读取后需手动类型转换：
getAttribute('data-count')返回"42"，要算数就得写+el.getAttribute('data-count')
写入 data- 属性必须用 setAttribute()
dataset.xxx = 'value' 看似赋值成功，其实只是改了内存快照，DOM 根本没变——刷新就丢，CSS 选择器也匹配不到，后续 getAttribute() 仍返回旧值。
- 真正写入 DOM 的唯一方式：
el.setAttribute('data-active', 'false') - 删除必须用：
el.removeAttribute('data-active')，delete el.dataset.active完全无效 - 混用风险高：先
dataset.foo = 'a'，再setAttribute('data-foo', 'b')，之后dataset.foo还是'a'（缓存未更新），而getAttribute('data-foo')是'b'，两者已不一致 - 存 JSON 必须手动序列化：
el.setAttribute('data-config', JSON.stringify(obj))；取时用JSON.parse(el.getAttribute('data-config') || '{}')，别用dataset.config（驼峰转换可能错位键名）
哪些场景真适合用 data-？哪些绝对不能碰？
data- 只适合存静态、轻量、非敏感的视图层元数据。一旦越界，轻则类型错乱，重则安全泄露。
- 适合：
data-action="delete"、data-item-id="105"、data-status="pending"—— 单一字符串，不频繁变更，不承载逻辑 - 不适合：
data-token="xxx"（XSS 风险）、data-user-preferences='{"theme":"dark"}'（结构复杂、易解析失败）、data-is-loading="true"（应由 class 或组件 state 控制） - CSS 中可用属性选择器：
[data-status="done"] { opacity: 0.6; }，但值含空格或特殊字符时必须加引号：[data-label="high-priority"] - React/Vue 中不要用
data-替代状态：改了data-active，组件不会重新渲染，ref.current.dataset.active读到的可能是过期快照
最常被忽略的一点：所有 data- 值都是字符串，哪怕你写 data-active="false"，JS 里拿到的仍是字符串 "false"，if (el.dataset.active) 恒为真——布尔判断必须显式比对字符串值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
