html data-属性仅适用于存静态、低频、与渲染无关的上下文信息；命名须全小写加连字符，js需通过dataset api访问，其值恒为字符串，复杂数据需手动序列化与解析。
HTML data- 属性不是前端状态管理工具，它只适合存静态、低频、与渲染无关的上下文信息；用它存购物车数量、用户权限或实时开关，等于把 DOM 当数据库用，后续维护和性能都会出问题。
data-* 属性命名必须全小写+连字符，否则 JS 读不到
浏览器只识别严格符合规范的 data- 属性：开头是 data-，后面只能是小写字母、数字、短横线（-），不能有大写、下划线或空格。写成 data-userId 或 data_user_id，DOM 解析时直接忽略——你在 DevTools 里都看不到它，dataset.userId 肯定返回 undefined。
-
data-order-status→ ✅ 正确，JS 中通过element.dataset.orderStatus访问 -
data-2024-report→ ✅ 合法，但 JS 中必须用element.dataset["2024Report"]（点号无法访问数字开头） -
data-apiEndpoint→ ❌ 浏览器不认，等同于没写
读写必须用 dataset API，别混用 getAttribute/setAttribute
dataset 是专为 data- 设计的语义化接口，自动处理连字符→驼峰转换，且兼容 IE11+。而 getAttribute 返回原始字符串，setAttribute 不触发 dataset 更新，两者混用会导致值不一致。
- 读取优先用：
if ("userId" in el.dataset) { id = el.dataset.userId; } - 写入优先用：
el.dataset.isLoading = "true"（自动转为data-is-loading="true"） - 设为空或删除：
delete el.dataset.isLoading，而不是赋值null或"" - 常见坑：
el.setAttribute("data-is-pending", "false")后，再读el.dataset.isPending可能还是旧值——因为dataset缓存未刷新（尤其在旧版 Chrome 中）
dataset 值永远是字符串，复杂数据要手动序列化
无论你存的是布尔、数字还是对象，dataset 暴露出来的全是字符串。写 data-count="0"，读出来是 "0"；写 data-config='{"theme":"dark"}'，读出来是字符串，不是对象。
- 数字转换：
Number(el.dataset.count)或+el.dataset.count - 布尔判断：
el.dataset.isActive === "true"（别用Boolean("false") === true） - 对象/数组：
JSON.parse(el.dataset.config || "{}")，并加try-catch防止格式错误 - 服务端渲染输出前，必须对 JSON 字符串做 HTML 实体编码，否则
JSON.parse()易报SyntaxError
真正容易被忽略的是：dataset 的“只读代理”本质——它不绑定 DOM 属性，修改 dataset.xxx 只影响内存映射，不会持久化到 HTML；若需服务端读取或 SEO 友好，必须用 setAttribute 写回。另外，高频读写（比如在 scroll 或 input 事件中循环访问多个 dataset）会触发重排，应提前缓存到局部变量再批量处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
