data-*属性仅用于存储静态元数据，不可替代状态管理；必须全小写连字符命名，读写需用getattribute/setattribute，值恒为字符串，css匹配须加引号。
不能用 data-* 存“状态”，它只适合存静态、轻量、与渲染无关的上下文信息；当成 React 的 state 或 Vue 的响应式数据来用，会立刻导致 DOM 同步错乱、类型误判、安全风险暴露。
data-* 属性不是状态容器，而是元数据槽位
data-* 的设计目标很明确：把和当前元素强关联、但又不参与样式或布局的额外信息“挂”在 DOM 上，比如埋点 ID、SKU 编号、API 路径片段。它不监听变更、不触发重绘、不支持响应式更新——DOM 改了，JS 里 dataset 不会自动刷新，CSS 选择器也不会重新匹配。
常见误用场景：
- 用
data-is-loading="true"控制按钮禁用，却忘了同步更新disabled属性 → 用户点击仍生效 - 存
data-user-preferences='{"theme":"dark"}'，然后直接JSON.parse(el.dataset.userPreferences)→ 键名被驼峰转换（userPreferences≠user-preferences），解析失败 - 在组件生命周期中反复
el.dataset.status = "done"，但其他模块用getAttribute("data-status")读到的还是旧值 → 因为dataset赋值根本不写 DOM
命名必须全小写+连字符，否则浏览器直接忽略
浏览器只识别严格符合规范的 data-* 属性名：前缀 data- 后只能跟小写字母、数字、连字符（-），且不能以数字开头（除非用方括号访问）。任何大小写混用、下划线、点号，都会让该属性从 DOM 中“消失”——不是读不到，是压根没被解析。
正确写法：
-
data-user-id→ JS 中读作el.dataset.userId -
data-api-endpoint→el.dataset.apiEndpoint -
data-2024-start-date→ 必须用el.dataset["2024StartDate"]（点号语法不支持数字开头）
错误写法（全部无效）：
-
data-userId、data_user_id、data-UserID→el.dataset.userId返回undefined -
data-2024-year写在 HTML 里，但 JS 用el.dataset.2024Year→ 语法错误
读写必须区分清楚：dataset 是只读映射，setAttribute 才真写入
dataset 是 DOM 解析时生成的一次性快照，它不绑定 DOM 属性节点。你对 dataset.xxx 的赋值，只是改了这个内存对象，不会影响实际 HTML 属性，也不会被 getAttribute()、CSS 选择器或后续 DOM 重解析看到。
真正可靠的读写方式：
- 读取优先用
el.getAttribute("data-xxx")—— 不转驼峰、不丢值、兼容所有合法命名 - 写入必须用
el.setAttribute("data-xxx", "value")—— 唯一能持久化到 DOM 的方法 - 删除必须用
el.removeAttribute("data-xxx")——delete el.dataset.xxx完全无效 - 存 JSON 时：写入用
el.setAttribute("data-config", JSON.stringify(obj))，读取用JSON.parse(el.getAttribute("data-config") || "{}")，务必加try/catch
类型永远是字符串：
-
data-count="42"→el.getAttribute("data-count")返回"42"，要数字得写+el.getAttribute("data-count") -
data-active="false"→Boolean("false") === true，判断布尔语义必须用el.getAttribute("data-active") === "true"
CSS 选择器匹配 data-* 时，值必须加引号
当用 CSS 基于 data-* 控制样式时，如果属性值含空格、斜杠、括号等特殊字符，不加引号会导致选择器失效：
[data-status="loading"] { opacity: 0.6; }
[data-api-endpoint="/v1/users"] { color: blue; } /* ✅ 正确 */
[data-api-endpoint=/v1/users] { color: blue; } /* ❌ 失效，/ 和 / 之间无引号 */
即使值看起来“安全”，也建议统一加引号，避免未来扩展时踩坑。另外，CSS 不识别驼峰，必须按 HTML 中写的原始连字符形式匹配。
真正需要存状态，就用 JS 变量、Map、WeakMap 或正规状态管理库；data-* 只负责把“这个按钮对应订单号是 12345”这种事实钉在 DOM 上——钉牢了，别指望它自己动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
