data-*属性须全小写连字符命名（如data-user-id），js中通过dataset.userid驼峰访问，写入必须用setattribute，值恒为字符串需手动转换，不可存敏感数据或大段json。
直接用 data- 开头的属性写在 HTML 标签里就行，但命名、读写方式、类型处理稍有不慎就会拿不到值或改不生效——这不是 JS 写错了，是 DOM 解析规则和 dataset 行为导致的。
data-* 属性名必须全小写+连字符，否则浏览器根本解析不到
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="123"；或者写了 data_user_id、data-UserID，结果都查不到。
- 合法写法只有：
data-user-id、data-api-endpoint、data-item-index - 非法写法（全部失效）：
data-userId、data_user_id、data-UserID、data-2024-year（数字开头需特殊处理） - 含数字开头的属性如
data-2024-year，JS 中只能用方括号访问：element.dataset["2024Year"]
dataset 是只读代理，写入必须用 setAttribute
常见错误现象：执行了 element.dataset.foo = "bar"，控制台打印 element.dataset.foo 看起来变了，但刷新页面后还原；或者用 getAttribute("data-foo") 查到的还是旧值。
-
dataset是一个DOMStringMap，它只是对当前 HTML 属性的**只读映射**，不是双向绑定 - 要真正更新 DOM 属性，必须调用：
element.setAttribute("data-foo", "new-value") - 删除属性也得用：
element.removeAttribute("data-foo")，而不是delete element.dataset.foo（后者无效） - 混用
dataset.foo = "a"和setAttribute("data-foo", "b")会导致两者值不一致
dataset 拿到的永远是字符串，类型要自己转
常见错误现象：HTML 里写 data-count="42"，JS 里直接 element.dataset.count + 1 得到 "421"；或者 data-active="true" 被当成字符串，if (element.dataset.active) 永远为真。
-
dataset.count的值是"42"，不是数字42；需手动转：Number(element.dataset.count)或+element.dataset.count -
dataset.active === "true"才能安全判断布尔语义，不能依赖Boolean("false") === true - 复杂结构如 JSON，必须先用
JSON.parse(element.getAttribute("data-config"))，不能直接JSON.parse(element.dataset.config)（因为 dataset 已做驼峰转换，可能取错键）
CSS 里用属性选择器匹配 data-*，记得加引号
常见错误现象：CSS 写 [data-status=active] { color: green; } 不生效，但 HTML 里 data-status="active" 明明存在。
- CSS 属性选择器中，属性值必须加引号：
[data-status="active"]，否则部分浏览器（尤其旧版 Safari）会忽略 - 含特殊字符的值（如空格、点、斜杠）更必须加引号，否则语法错误
- 不支持响应式更新：修改
data-值后，CSS 规则不会自动重匹配，得靠 class 切换或 JS 强制重绘
最常被忽略的一点：data-* 不是状态容器，它是静态上下文快照。一旦你开始用它存开关状态、token、大段配置或频繁更新的计数，就等于把 DOM 当数据库用了——既拖慢解析，又暴露敏感信息，还让逻辑和视图耦合得难以调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
