data-*属性命名必须全小写加连字符，非法命名如data-userid会被浏览器忽略；dataset为只读映射，修改须用setattribute()；所有值均为字符串，需手动类型转换；读取推荐getattribute()更可靠。
data-* 属性不是“随便加个属性就行”的快捷键，写错名字 JS 就读不到，混用 API 会导致 DOM 和内存值不一致。
data-属性名必须全小写+连字符，否则浏览器直接忽略
浏览器只解析 data- 后紧跟小写字母、数字或连字符（且不能以数字开头）的属性。写成 data-userId、data_user_id、data-UserID，DOM 中根本不存在，DevTools 里都看不到，dataset.userId 必然返回 undefined。
-
data-user-id✅ → JS 中读作el.dataset.userId -
data-api-url✅ →el.dataset.apiUrl -
data-2024-start✅ → 但只能用el.dataset["2024Start"]（点号语法不支持数字开头） -
data-productName❌ → 浏览器静默丢弃，等同于没写
dataset 只读，写入必须用 setAttribute()
dataset 是 DOM 解析时生成的一次性映射，不是双向绑定。给它赋值只是改了内存副本，不会更新 DOM 属性节点。
- 错误写法：
el.dataset.userId = "456"→ DevTools 里查el.outerHTML还是旧值 - 正确写法：
el.setAttribute("data-user-id", "456")→ 真正写入 DOM - 删除属性：
el.removeAttribute("data-user-id")，别用delete el.dataset.userId - 混用后果：先
dataset.foo = "a"，再setAttribute("data-foo", "b")，后续dataset.foo仍返回"a"，而getAttribute("data-foo")返回"b"
所有值都是字符串，类型转换得手动做
哪怕你写 data-count="42" 或 data-active="true"，JS 里拿到的仍是字符串 "42" 和 "true"，不自动转类型。
- 布尔判断别用
Boolean(el.dataset.active)→ 改用el.dataset.active === "true" - 数字转换用
+el.dataset.count或Number(el.dataset.count) - 存 JSON：
el.setAttribute("data-config", JSON.stringify({theme: "dark"})) - 取 JSON：
JSON.parse(el.getAttribute("data-config") || "{}")，务必加try/catch
读取优先用 getAttribute()，尤其在 SSR 或命名不规范时
dataset 对非法命名（如含大写、下划线、数字开头）静默失败；SSR 场景下首次 JS 执行前 dataset 可能为空。而 getAttribute() 直接读原始属性，更可靠。
- 推荐读法：
el.getAttribute("data-user-id")（返回原始字符串，不依赖命名规范） - 仅当命名严格合规且需驼峰语义时，才用
el.dataset.userId - 判断是否存在：
el.hasAttribute("data-loaded")比"loaded" in el.dataset更稳妥
data-* 属性只适合存轻量静态元数据，比如组件类型标识、调试开关、CSS 钩子；真要跨刷新持久化状态，得靠 localStorage 或后端 API —— 它本身只是 DOM 节点上的一行字符串快照，刷新后还在 HTML 里，但 JS 修改它并不会写回源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
