<p>data-* 属性仅适合存静态、低频、与渲染无关的上下文信息，不可替代状态管理；命名须全小写加连字符，dataset 为只读代理，值恒为字符串，高频、敏感、复杂或跨组件状态均不应使用。</p>
data-* 属性不能替代状态管理，它只适合存静态、低频、与渲染无关的上下文信息；用它存用户权限、购物车数量或实时开关，后续维护和性能都会出问题。
data-* 属性名写错，JS 就读不到
浏览器只解析符合规范的 data- 属性：前缀后必须全小写 + 连字符，不能有大写、下划线、点号或空格。写成 data-userId 或 data_user_id，DOM 直接忽略——element.dataset.userId 返回 undefined，不是 JS 写错了，是属性压根没进 DOM 树。
-
data-user-id→ ✅ 正确，JS 中读作element.dataset.userId -
data-api-endpoint→ ✅ 正确，读作element.dataset.apiEndpoint -
data-2024-start-date→ ✅ 合法，但必须用element.dataset["2024StartDate"]访问（点号语法不支持数字开头） -
data-userId、data-UserID、data-user_name→ ❌ 全部无效，DevTools 里都看不到该属性
dataset.xxx = "value" 看似生效，其实没改 DOM
dataset 是只读代理，不是双向绑定。它只是 DOM 解析时对 data- 属性的一次性映射。执行 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') - 读取优先用：
element.dataset.foo（自动驼峰、语义清晰） - 混用会出问题：先
dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo仍返回'a'
值永远是字符串，类型要自己转
哪怕你在 HTML 里写 data-count="42" 或 data-is-active="true"，JS 里拿到的仍是字符串 "42" 和 "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-* 不是状态管理器。它不适合存以下内容：
- 高频变更的状态（如滚动位置、输入框实时值）——触发重排且无监听机制
- 敏感信息（如 token、用户密码）——
data-属性明文暴露在 HTML 源码中 - 复杂业务状态（如购物车条目、权限树、表单校验结果）——缺乏结构化更新、diff 和事件通知能力
- 需跨组件共享的状态（如全局主题、语言偏好）——
dataset无法广播，必须手动遍历或桥接
真正容易被忽略的是：data-* 的“静态性”——它不响应 URL 变化、不驱动路由、不触发 re-render，所有同步逻辑都得你手写。一旦把它当状态源，就等于把 DOM 当数据库，越往后越难解耦。
