优先用 getattribute() 读取 data- 属性，因 dataset 对非法命名（如含数字、大写、下划线）静默失败且不自动转类型；data- 属性名须全小写+连字符才有效；写入必须用 setattribute()，dataset 赋值不真正更新 dom。
直接用 data- 属性存字符串值，读取时优先用 getAttribute() 而不是 dataset——后者在命名不规范、含数字或大小写混用时会静默失败，且所有值都是字符串，不自动转类型。
data-* 属性名怎么写才有效
浏览器只识别全小写 + 连字符的命名，比如 data-user-id、data-api-endpoint。其他写法一律无效：
-
data-userId（含大写）→dataset.userId拿不到 -
data_user_id（下划线）→dataset.userId或dataset._userId都是undefined -
data-2024-year（数字开头）→dataset["2024Year"]才能访问，dataset.2024Year语法错误 -
data-UID→dataset.uid不会触发转换，必须用getAttribute("data-UID")
读取时为什么 dataset.xxx 经常返回 undefined
因为 dataset 是个只读代理，它只映射符合驼峰规则的属性，且对非法命名完全静默。而 getAttribute() 直接读 HTML 字符串，无转换、无过滤、不丢值：
<div data-user-id="123" data-1st-load="true"></div>-
el.dataset.userId→"123"✅ -
el.dataset["1stLoad"]→"true"✅（但得用方括号） -
el.getAttribute("data-1st-load")→"true"✅（最稳） -
el.getAttribute("data-user-id")→"123"✅（和 dataset 一致，但更可控）
写入和更新 data 属性不能只靠 dataset.xxx = yyy
dataset 的赋值只是临时映射，不真正写入 DOM 属性。刷新或重新解析后就丢失：
-
el.dataset.status = "loading"→ 看起来生效，但el.getAttribute("data-status")可能还是null - 真正写入必须用：
el.setAttribute("data-status", "loading") - 删除必须用：
el.removeAttribute("data-status")，delete el.dataset.status完全无效 - 如果要批量写多个，别循环 setAttribute，改用
Object.entries(data).forEach(([k, v]) => el.setAttribute(`data-${k}`, v))
存 JSON 或布尔/数字时必须手动处理类型
所有 data- 值本质是字符串，浏览器不做任何解析：
-
data-count="42"→getAttribute("data-count")返回"42"，不是数字42；需+el.getAttribute("data-count")或Number() -
data-active="false"→Boolean("false") === true，判断要用el.getAttribute("data-active") === "true" -
data-config='{"theme":"dark","delay":300}'→ 必须用JSON.parse(el.getAttribute("data-config"))，不能用JSON.parse(el.dataset.config)（键名可能被驼峰转换错） - 超大 JSON（>2KB）建议改用
<script type="application/json" id="init-data">{...}</script>，避免拖慢 HTML 解析
真正容易被忽略的是：dataset 不是响应式容器，也不是状态管理工具。它只适合存轻量、静态、与渲染无关的上下文信息，比如 SKU 编号、埋点 ID、初始配置。一旦你开始用它存 loading 状态、用户输入、列表项选中态——说明该换 state 管理了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
