data-*属性仅用于存静态元数据，命名须全小写加连字符；dataset是驼峰映射只读视图，持久化必须用setAttribute；布尔/数值需手动转换，JSON需解析并防错。
data-* 属性不是状态管理工具，它只适合存静态、轻量、非敏感的视图元数据；写错命名、误当布尔值用、混用 dataset 与 setAttribute，三者任一都会导致读不到、值错乱或 DOM 不同步。
data-* 属性名必须全小写加连字符，否则 JS 读不到
浏览器只解析符合规范的 data-*：必须以 data- 开头，后面只能是小写字母、数字、短横线（-），不能有大写、下划线、点号或空格。写成 data-userId 或 data_user_id，DOM 解析时直接忽略——DevTools 里都看不到，dataset.userId 必然返回 undefined。
-
data-user-id✅ → JS 中访问el.dataset.userId -
data-api-endpoint✅ → 访问el.dataset.apiEndpoint -
data-2024-start✅ → 必须用el.dataset["2024Start"]（点号语法不支持数字开头） -
data-userId❌、data_user_id❌、data-UserID❌ —— 全部无效
dataset.userId 和 getAttribute("data-user-id") 到底该用哪个
二者行为不同，不是“换种写法”，而是底层机制差异：dataset 是 DOM 解析后生成的驼峰映射视图，getAttribute 是原始字符串快照。选错会埋坑。
- 服务端渲染（SSR）输出的初始值 → 优先用
el.getAttribute("data-user-id")，它不依赖 DOM 解析阶段，更可靠 - 属性名含数字开头（如
data-2024-year）→dataset.2024Year语法错误，只能用getAttribute - 需要判断属性是否存在但值为空字符串 →
getAttribute返回""或null，而dataset.xxx对空值也返回undefined，语义不同 - 兼容 IE11？
dataset在 IE10+ 才稳定，旧环境建议统一走getAttribute
dataset 赋值不会真正更新 DOM 属性节点
el.dataset.isLoading = "true" 看似生效，实际只是修改内存中 dataset 对象的副本，不会同步更新 HTML 源码里的 data-is-loading 值。刷新页面后，原始值仍保持不变。
立即学习“前端免费学习笔记（深入）”；
- 真正持久化写入的唯一方式是：
el.setAttribute("data-is-loading", "true") - 删除属性必须用：
el.removeAttribute("data-is-loading")，而非el.dataset.isLoading = null - 混用会出问题：先
dataset.foo = "a"，再setAttribute("data-foo", "b")，后续dataset.foo可能仍返回"a"（dataset 不是双向绑定） - 若需服务端读取或 SEO 友好，必须用
setAttribute写回，dataset的赋值对 SSR 完全无效
dataset 值永远是字符串，布尔和数值必须手动转换
HTML 属性值没有类型，data-is-active="false" 读出来仍是字符串 "false"。直接用于条件判断（如 if (el.dataset.isAvailable)）会导致逻辑错误——只要属性存在，哪怕值是 "false"，表达式也成立。
- 布尔判断推荐存在性检查：
el.hasAttribute("data-is-active")，比读值更可靠 - 数值转换必须显式：
Number(el.dataset.price)或parseInt(el.dataset.count, 10) - 存 JSON 字符串（如
data-config='{"theme":"dark"}'）→ 必须JSON.parse(el.dataset.config || "{}")，且加try/catch防止格式错误 - 服务端渲染输出前，JSON 字符串要做 HTML 实体编码，否则客户端
JSON.parse()易报SyntaxError
真正容易被忽略的是 dataset 的“只读代理”本质：它不绑定 DOM 属性，修改它只影响内存映射；而 data-* 本身不触发重绘、不响应变更，驱动 UI 更新还得靠 class 或 hidden 这类原生属性。
