data-*属性不是为临时状态设计的，而是用于静态元信息；命名必须全小写加连字符，读取值恒为字符串，json需getattribute+parse，赋值需setattribute，且数据完全公开不安全。
不能用 data-* 存“临时数据”——它根本不是为临时状态设计的，而是为静态元信息准备的。真要存临时值，该用 JS 变量、Map 或闭包，而不是往 DOM 上挂。
data-* 属性名写错就等于没写
浏览器只认严格符合规范的命名：data- 后必须全小写 + 连字符，不能有大写字母、下划线、点号或空格。
-
data-user-id→ ✅ 可读为el.dataset.userId -
data_user_id、data-userId、data-UserID→ ❌ DOM 中不存在，dataset返回undefined -
data-2024-start→ ✅ 合法，但只能用el.dataset["2024Start"]访问（点号语法不支持数字开头）
dataset 读出来永远是字符串
哪怕你写的是 data-count="42" 或 data-active="false"，dataset.count 和 dataset.active 拿到的仍是字符串，不转换就会出逻辑错误。
-
el.dataset.count + 1得到"421"，不是43；应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true；正确判断是el.dataset.active === "true" - 存 JSON 字符串（如
data-config='{"theme":"dark"}'）必须用el.getAttribute("data-config")再JSON.parse()，不能依赖dataset.config—— 驼峰转换会破坏原始键名
dataset 赋值不会实时同步到 DOM
el.dataset.xxx = "value" 看似生效，但它只是更新了 dataset 对象副本；若后续用 getAttribute("data-xxx") 或触发重渲染，可能拿到旧值。
- 真正可靠写入方式只有：
el.setAttribute("data-xxx", "value") - 删除属性用：
el.removeAttribute("data-xxx")或delete el.dataset.xxx（后者更安全） - 混用会出问题：先
dataset.foo = "a"，再setAttribute("data-foo", "b")，之后dataset.foo仍返回"a"——dataset不是响应式代理
最常被忽略的一点：data-* 是公开的，控制台一眼可见，JS 任意可读；它不加密、不隔离、不防篡改。所谓“临时”，往往意味着状态会变、可能敏感、或需封装——这些恰恰是 data-* 最不适合的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
