data-*属性命名必须全小写加连字符，如data-user-id；驼峰、下划线或大写均无效，浏览器忽略解析；dataset读取自动转驼峰，但值恒为字符串，类型转换须手动处理。
data-* 属性不是“随便加个 data- 开头就能用”，写错命名、读错方式、存错内容，JS 里根本取不到值——这不是代码逻辑问题，是 DOM 解析规则和 dataset 映射机制决定的。
data-* 属性名必须全小写 + 连字符，否则 dataset 读不到
浏览器只解析符合 data- + 小写字母/数字/连字符（且至少一个连字符）的属性。写成 data-userId、data_user_id、data-UserID，DOM 中看似存在，但 element.dataset.userId 永远是 undefined。
-
data-user-id→ 可读为element.dataset.userId -
data-api-endpoint→ 可读为element.dataset.apiEndpoint -
data-2024-year→ 必须用element.dataset["2024Year"]（点号非法） -
data-item-index是合法的；data-itemindex（无连字符）不合法，dataset 不映射
dataset 是只读代理，写入必须用 setAttribute
element.dataset.foo = "bar" 看似生效，但只是改了内存副本；刷新页面或重新渲染后，原始 HTML 的 data-foo 值不变，getAttribute("data-foo") 仍返回旧值。
- 读取优先用
element.dataset.xxx（语义清晰、自动驼峰） - 写入必须用
element.setAttribute("data-xxx", "new-value") - 删除必须用
element.removeAttribute("data-xxx")，delete element.dataset.xxx无效 - 混用
dataset.xxx = "a"和setAttribute("data-xxx", "b")会导致两者值不一致
dataset 拿到的永远是字符串，类型要自己转
HTML 里写 data-count="42"，JS 里 element.dataset.count 是 "42"，不是数字；data-active="true" 的值是字符串 "true"，不是布尔值。
-
Number(element.dataset.count)或+element.dataset.count转数字 -
element.dataset.active === "true"判断布尔语义，不能用Boolean(element.dataset.active) - 存 JSON？先
JSON.stringify(obj)再setAttribute；读取时用JSON.parse(element.getAttribute("data-config"))，别用dataset.config（键名可能被驼峰转换错）
CSS 里用 [data-*] 选择器必须加引号
[data-status=active] 在值含空格、点号或连字符（如 data-status="in-progress"）时完全失效——CSS 规范要求特殊字符值必须加引号。
- 一律写成
[data-status="active"]或[data-role="menu-item"] - 不加引号的写法只在纯字母、纯数字值下偶然有效，不可依赖
- 服务端渲染输出前，若值来自用户输入或 JSON，需做 HTML 实体编码，否则
JSON.parse()易报SyntaxError
最常被忽略的是：data-* 不是前端状态容器，它只适合存静态、轻量、非敏感的上下文信息；一旦用来存 token、大段 JSON 或作为 React/Vue 的响应式状态替代品，立刻暴露安全风险或引发 DOM 同步混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
