data-*属性名必须全小写加连字符，数字开头需方括号访问；dataset只读，修改须用setattribute；值恒为字符串，类型转换需手动处理；不适用于状态管理或敏感数据存储。
data-* 属性名写错，JS 读不到
浏览器只解析符合规范的 data- 属性名：必须全小写、只能含字母/数字/连字符（-），且不能以数字开头。写成 data-userId、data_user_id、data-UserID，DOM 根本不认——不是读不到，是压根没进 dataset，element.dataset.userId 永远返回 undefined。
正确写法只有：data-user-id → JS 中访问 element.dataset.userId；data-api-key → element.dataset.apiKey。含数字开头如 data-2024-year，必须用方括号：element.dataset["2024Year"]，element.dataset.2024Year 是语法错误。
dataset 赋值不生效，DOM 没更新
dataset 是只读映射，不是双向绑定。执行 element.dataset.foo = "bar" 只改了内存副本，element.getAttribute("data-foo") 仍返回旧值，刷新页面就还原，CSS 选择器也看不到变化。
真正要持久化修改，必须用：element.setAttribute("data-foo", "new-value")；删除用：element.removeAttribute("data-foo")。混用会出问题：dataset.foo = "a" 后再 setAttribute("data-foo", "b")，两者值就不一致——dataset.foo 还是 "a"，getAttribute 返回 "b"。
值是字符串，类型没转换就直接用
无论 HTML 里写的是 data-count="42" 还是 data-active="true"，JS 里拿到的都是字符串 "42" 和 "true"。常见错误：
-
if (el.dataset.active === true)→ 永远false -
el.dataset.count + 1→ 得到"421"（字符串拼接） -
el.dataset.flag对空属性（如<div data-flag></div>）返回空字符串""，不是null或undefined
判断是否存在要用 'flag' in el.dataset；转数值用 Number(el.dataset.count) 或 +el.dataset.count；布尔建议统一约定：el.dataset.flag === "true"。
存 JSON 却忘了手动序列化/解析
data- 属性只能存字符串。直接赋对象或数组：el.dataset.config = { theme: "dark" }，实际存进去的是 "[object Object]"，JSON.parse() 必报错。
必须手动处理：
- 写入前：
el.setAttribute("data-config", JSON.stringify({ theme: "dark", tabs: ["home"] })) - 读取时：
const config = JSON.parse(el.getAttribute("data-config") || "{}")，且务必加try/catch - 服务端渲染输出 JSON 前，必须做 HTML 实体编码，否则
JSON.parse()易因引号或尖括号报SyntaxError
最隐蔽的问题是：dataset 不支持 undefined、Date、function 等类型，JSON.stringify() 会静默丢弃，但开发者往往以为“存进去了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
