data-*属性名必须严格符合规范：data-后仅限小写字母、数字或连字符且不以数字开头；dataset是只读映射，修改需用setattribute；所有值均为字符串，类型转换和json序列化须手动处理。
data-* 属性名写错，JS 就读不到
浏览器只识别严格符合规范的 data- 属性名：前缀 data- 后必须跟小写字母、数字或连字符（-），且不能以数字开头。任何大小写混用、下划线、点号，都会让该属性被完全忽略——不是读不到，是压根没进 DOM。
常见失效写法：data-userId、data_user_id、data-UserID、data-2024-year（数字开头需特殊访问）；正确写法只有：data-user-id → JS 中通过 el.dataset.userId 访问，data-api-endpoint → el.dataset.apiEndpoint。
含数字开头的属性（如 data-2024-start-date）虽合法，但 JS 中只能用方括号语法：el.dataset["2024StartDate"]，el.dataset.2024StartDate 是语法错误。
dataset 赋值不写 DOM，真要改得用 setAttribute
dataset 是只读映射，不是双向绑定。执行 el.dataset.foo = "bar" 只改了内存对象，不会触发 DOM 更新，el.getAttribute("data-foo") 仍返回旧值，刷新后还原，CSS 的 [data-foo] 选择器也看不到变化。
真正持久化修改的唯一方式是：el.setAttribute("data-foo", "new-value")；删除必须用：el.removeAttribute("data-foo")。
混用会出问题：先 el.dataset.foo = "a"，再 el.setAttribute("data-foo", "b")，后续 el.dataset.foo 仍返回 "a"（缓存未刷新），而 getAttribute 返回 "b"——两者已不一致。
所有值都是字符串，类型转换必须手动做
dataset 和 getAttribute() 返回的值永远是字符串，哪怕你写的是 data-count="42" 或 data-active="false"。类型转换必须手动做，否则逻辑会出错。
-
el.dataset.count + 1得到"421"（字符串拼接），不是43；应写成Number(el.dataset.count) + 1或+el.dataset.count + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔为真）；正确判断是el.dataset.active === "true" - 存 JSON 字符串时，推荐用
getAttribute("data-config")读取再JSON.parse()，避免dataset.config因驼峰转换导致键名错位（比如data-user-preferences→dataset.userPreferences，但原始键是user-preferences）
存数组或对象必须 JSON.stringify()，且读取要加 try/catch
data-* 属性本质是 DOM 字符串属性，浏览器会把任何赋值自动转成字符串。哪怕你写 el.dataset.items = [1, 2, 3]，最终存进去的是 "1,2,3"（调用 toString()），不是 JSON。
必须手动序列化：写入前用 JSON.stringify()；读取后必须手动反序列化：JSON.parse()，且要加 try/catch。
示例：
el.setAttribute("data-config", JSON.stringify({ theme: "dark", tabs: ["home", "profile"] }));
// 读取
let config = {};
try {
config = JSON.parse(el.getAttribute("data-config") || "{}");
} catch (e) {
// 解析失败，fallback
}
注意：dataset.xxx 读不到时返回 undefined，不是 null 或空字符串；JSON.stringify() 不支持 undefined、function、Symbol、Date（会变字符串）、NaN（变 null）——不可序列化字段会静默丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
