data-* 属性需严格遵循规范：仅小写字母、数字、连字符，不能数字开头或含大写/下划线；js 通过 dataset 访问时自动驼峰转换，但值恒为字符串，修改须用 setattribute，不可用于状态管理。
data-* 属性名写错，JS 就读不到
浏览器只识别严格符合规范的 data- 属性：前缀后必须是小写字母、数字或连字符（-），不能以数字开头，不能含大写字母、下划线、点号、空格或中文。
常见失效写法：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"。
一旦出现以下任一情况，就必须交给 JS 变量、useState 或 store 管理，而不是往 DOM 上堆 data-：
- 多个组件响应同一变化
- 需持久化到
localStorage或服务端 - 状态依赖异步逻辑（如权限校验后才决定是否显示）
- 值需参与复杂计算或频繁更新（如购物车数量、实时倒计时）
真正难的不是怎么写，而是判断“它该不该存在这里”——只要不确定是否只服务于当前元素及其直系子元素，就别放 data-。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
