data-*属性仅用于静态元数据，动态数据应使用变量或map；命名须严格小写、数字、连字符，且不以数字开头；赋值需用setattribute，读取优先用getattribute，所有值均为字符串需手动转换。
data-* 属性不是临时状态容器，它只适合存初始化时的静态元数据；真要存 JS 运行中产生的临时数据，优先用变量或 Map，而不是反复读写 dataset。
data-* 属性名写错就彻底失效
浏览器只认严格符合规范的 data- 属性：前缀后必须是小写字母、数字或连字符，且不能以数字开头。写成 data-userId、data_user_id 或 data-UserID，DOM 根本不解析——不是读不到，是压根没进元素属性列表。
-
data-user-id→ 可读为element.dataset.userId -
data-api-endpoint→ 对应element.dataset.apiEndpoint -
data-2024-start-date→ 必须用element.dataset["2024StartDate"]，点号语法报错 - 含空格、下划线、点号、大写字母的写法，一律被忽略，
getAttribute也返回null
dataset 赋值不更新 DOM，别被假象骗了
element.dataset.foo = "bar" 看似成功，其实只是改了内存里那个 DOMStringMap 的副本，不会同步到真实 DOM 属性节点上。刷新页面、重渲染、调用 el.outerHTML，你看到的还是原始 HTML 里的值。
- 真正写入 DOM 的唯一方式是：
element.setAttribute("data-foo", "bar") - 删除必须用：
element.removeAttribute("data-foo")，delete element.dataset.foo无效 - 混用会出问题：先
dataset.foo = "a"，再setAttribute("data-foo", "b")，后续dataset.foo仍返回"a"（缓存未刷新），而getAttribute("data-foo")返回"b"
所有值都是字符串，类型转换必须手动做
哪怕你写 data-count="42" 或 data-active="false"，JS 读出来全是字符串。不做转换直接参与运算或判断，逻辑大概率出错。
-
element.dataset.count + 1得到"421"，不是43；应写+element.dataset.count + 1或Number(element.dataset.count) + 1 -
if (element.dataset.active)在data-active="false"时仍为true（非空字符串转布尔为真）；正确写法是element.dataset.active === "true" - 存对象/数组必须用
JSON.stringify()，读取必须用JSON.parse()并加try/catch；dataset.config直接赋值对象会变成"[object Object]"
读取优先用 getAttribute()，别迷信 dataset
getAttribute("data-xxx") 是最稳的读取方式：它不依赖驼峰转换规则，不静默失败，不自动类型转换，返回的就是你在 HTML 里写的原始字符串。
- 当属性名含数字开头（
data-1st-load）、大写（data-apiKey）、下划线（data_user_id）时，dataset完全不可用，getAttribute依然能读 - 服务端渲染输出了
data-initial-state='{"count": 10}'？必须用getAttribute("data-initial-state")+JSON.parse() - 想判断某个
data-属性是否存在（不管值是什么）？el.hasAttribute("data-xxx")比element.dataset.xxx !== undefined可靠得多
真正容易被忽略的是：data-* 属性在 JS 执行过程中修改后，不会触发重新渲染或样式重计算；CSS 选择器如 [data-loaded="true"] 匹配的是 DOM 属性值，不是 dataset 内存映射——所以改 dataset 不会让样式生效，必须用 setAttribute。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
