data-*属性名必须全小写加连字符，否则浏览器解析时直接忽略；值恒为字符串，需手动类型转换；dataset只读，修改须用setAttribute；不可替代状态管理。
data-* 属性名必须全小写加连字符，否则浏览器直接忽略
浏览器只解析符合规范的 data-* 属性：前缀 data- 后必须跟小写字母、数字或连字符（-），且不能以数字开头。写错名字，DOM 里根本不存在，不是“读不到”，是压根没进树。
常见无效写法：data-userId、data_user_id、data-UserID、data-2024-start（数字开头需特殊访问）；正确写法只有：data-user-id → JS 中对应 el.dataset.userId，data-api-endpoint → el.dataset.apiEndpoint。
含数字开头的合法属性（如 data-2024-report）虽能被解析，但 JS 中只能用方括号语法：el.dataset["2024Report"]，el.dataset.2024Report 是语法错误。
设置新 data 属性必须用 setAttribute()，别碰 dataset 赋值
dataset 是只读映射，不是双向绑定。执行 el.dataset.newProp = "value" 看似生效，实际只是改了内存副本，DOM 上查不到该属性，getAttribute("data-new-prop") 返回 null，CSS 选择器也匹配不到。
立即学习“前端免费学习笔记（深入）”；
真正写入 DOM 的唯一可靠方式是：
-
el.setAttribute("data-user-id", "123")—— 新增或更新 -
el.removeAttribute("data-user-id")—— 删除 -
el.hasAttribute("data-is-active")—— 判断是否存在（比读值更安全）
混用会立刻导致状态不一致：先 dataset.foo = "a"，再 setAttribute("data-foo", "b")，后续 dataset.foo 仍返回 "a"，而 getAttribute("data-foo") 返回 "b"。
读取时优先用 dataset，但要注意字符串类型和驼峰转换
dataset 读取方便、语义清晰，自动把 data-user-id 转成 userId，但它返回的永远是字符串——哪怕你写的是 data-count="42" 或 data-active="false"。
常见踩坑点：
-
el.dataset.count + 1得到"421"（字符串拼接），应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔恒真），正确判断是el.dataset.active === "true" - 存 JSON 字符串时，用
JSON.parse(el.getAttribute("data-config"))，别用dataset.config（驼峰转换可能错位原始键名）
动态设置场景下，setAttribute() 是唯一可信赖的操作入口
服务端渲染（SSR）或框架（如 React/Vue）中，dataset 在首次 JS 执行前不可读，此时必须靠 getAttribute() 安全取值；而所有写操作，无论静态还是动态，都必须走 setAttribute() 才能确保 DOM 属性节点真实更新。
性能提示：高频循环中反复读多个 dataset 属性可能触发隐式布局抖动，单值读取优先用 getAttribute() 更轻量；兼容性底线：IE11 不支持 dataset，getAttribute() 是兜底方案。
最易被忽略的一点：data-* 不是状态管理器，它只适合存静态、轻量、非敏感的视图元数据。一旦开始用它存布尔开关、计数器甚至对象，就该警惕——你正在把 DOM 当成状态容器，这迟早会在组件重渲染、服务端 hydration 或 CSS 响应逻辑中出问题。
