data-*属性名必须全小写加连字符，否则浏览器忽略解析；dataset读取自动转驼峰但值恒为字符串，修改须用setattribute，不可用于存敏感数据或替代状态管理。
data-* 属性名写错，JS 就读不到
浏览器只解析符合规范的 data-* 属性：前缀 data- 后必须跟至少一个字符，且只能是小写字母、数字或连字符（-），不能有大写、下划线、点号或空格。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里写了 data-userId="123"——这不是 JS 写错了，是浏览器压根没把它当 data-* 属性处理，DOM 中查不到，dataset 自然为空。
-
data-user-id→ 正确，JS 中读作element.dataset.userId -
data-api-endpoint→ 正确，JS 中读作element.dataset.apiEndpoint -
data-2024-start-date→ 正确，但必须用element.dataset["2024StartDate"]访问（点号语法不支持数字开头） -
data-userId、data_user_id、data-UserID→ 全部无效，DOM 中不存在该属性
dataset.xxx = "value" 看似生效，其实没改 DOM
dataset 是只读代理，不是双向绑定。它只是 DOM 解析时对 data-* 属性的一次性映射，修改它不会同步更新 HTML 属性节点。
执行 element.dataset.foo = "new" 后，element.dataset.foo 看起来变了，但 element.getAttribute('data-foo') 仍返回旧值；刷新页面、重新渲染或调用 el.outerHTML 时，原始 HTML 的 data-foo 值不变。
- 真正持久化写入的唯一方式：
element.setAttribute('data-foo', 'value') - 删除属性必须用：
element.removeAttribute('data-foo') - 混用会出问题：先
dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo仍返回'a'（缓存未刷新）
值永远是字符串，类型要自己转
哪怕你写 data-count="42" 或 data-active="true"，element.dataset.count 拿到的仍是字符串 "42"，element.dataset.active 是字符串 "true"，不是布尔值。
常见错误：element.dataset.count + 1 得到 "421"（字符串拼接）；if (element.dataset.active) 在 data-active="false" 时也成立（因为非空字符串转布尔为 true）。
- 转数字：
Number(element.dataset.count)或+element.dataset.count - 判布尔：
element.dataset.active === "true"，而非Boolean(element.dataset.active) - 存 JSON：
element.setAttribute('data-config', JSON.stringify({theme: "dark"})) - 取 JSON：
JSON.parse(element.getAttribute('data-config') || '{}')，务必加try/catch或空值兜底
什么时候不该用 data-*？
data-* 不是状态管理器，只适合存静态、轻量、非敏感的上下文信息。当成 React/Vue 的 state 用，或存 token、大段 JSON、用户偏好等动态数据，会立刻暴露安全风险或引发 DOM 同步错乱。
- 绝对不要放：
token、password、手机号、权限标识（如 data-permission="admin"）—— 所有data-*都明文可见 - 单个值建议控制在几 KB 内；超长字符串优先用
Map或 JS 变量缓存 - 框架中常被忽略：Vue/React 默认不透传
data-*，需显式绑定（如 Vue 的v-bind="$attrs"，React 的{...props}） - CSS 选择器匹配时，值必须加引号：
[data-status="active"]，不能写成[data-status=active]
最易被忽略的一点：dataset 的“只读代理”本质不是 bug，而是设计使然——它不负责同步，只负责映射。所有想靠它自动更新 DOM 的尝试，都会在刷新或重渲染后失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
