data-*属性名必须严格符合规范：前缀data-后仅允许小写字母、数字或连字符且不能以数字开头；js通过dataset访问时自动转驼峰，数字开头需方括号语法；dataset为只读映射，修改须用setattribute；所有值均为字符串，需手动类型转换；不宜用作状态管理器，仅适合存储静态元数据。
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 选择器也看不到变化。
真正持久化修改的唯一方式是：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" —— 两者已不一致。
所有值都是字符串，类型转换必须手动做
哪怕 HTML 里写 data-count="42" 或 data-active="false"，el.dataset.count 拿到的仍是字符串 "42"，el.dataset.active 是字符串 "false"，不是布尔值。
典型错误：
-
el.dataset.count + 1得到"421"（字符串拼接），应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔恒真），正确判断是el.dataset.active === "true" - 存 JSON 时，用
el.setAttribute("data-config", JSON.stringify(obj))；取时必须用JSON.parse(el.getAttribute("data-config") || "{}")，不能用el.dataset.config（驼峰转换可能错位键名）
别把 data-* 当状态管理器用
data- 属性设计目标很明确：存静态、轻量、与渲染无关的上下文元数据，比如 data-item-id="42"、data-modal-target="login"、data-api-path="/v1/users"。它不监听变更、不触发重绘、不支持响应式更新。
常见误用：
- 用
data-is-loading="true"控制按钮禁用，却忘了同步更新disabled属性 → 用户仍可点击 - 在组件生命周期中反复赋值
el.dataset.status = "done"，但其他模块用getAttribute("data-status")读到的还是旧值 - 存敏感信息（token、手机号）→ 所有用户右键“查看源代码”都能看到
真正关键的一点：data-* 的价值不在“能存多少”，而在“让数据和它所属的 DOM 节点绑定得足够紧”——删掉那个元素，数据就自然消失，不用手动清理变量或缓存。但这也意味着，它不适合承载需要跨组件共享、频繁更新或参与逻辑决策的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
