data-* 属性仅用于存储静态、轻量、非敏感的视图元数据；常见错误包括命名不规范（如 data-userid）、误用 dataset 赋值（只读映射）、忽略字符串类型；正确访问需严格遵循 data-小写连字符命名，通过 getattribute 获取原始值，持久化修改必须用 setattribute/ removeattribute。
data-* 属性不是状态管理工具，它只适合存静态、轻量、非敏感的视图元数据；写错命名、用 dataset 赋值、忽略字符串类型，这三类错误占实际问题的 90% 以上。
data-user-id 写成 data-userId 就读不到
浏览器只识别严格符合规范的 data- 属性名：前缀 data- 后必须全小写 + 连字符（-），不能含大写字母、下划线、点号或数字开头。常见失效写法包括：data-userId、data_user_id、data-UserID、data-2024-start（数字开头需特殊访问）。正确写法只有：data-user-id → JS 中通过 el.dataset.userId 访问；data-api-endpoint → el.dataset.apiEndpoint。
一旦属性名不合法，浏览器压根不解析它——不是“读不到”，是 DOM 树里根本不存在该属性，getAttribute('data-userId') 也会返回 null。
el.dataset.active = "false" 不会更新 DOM
dataset 是只读映射，不是双向绑定。执行 el.dataset.active = "false" 只改了内存副本，el.getAttribute('data-active') 仍返回旧值，CSS 选择器也看不到变化，刷新后还原。
- 真正持久化修改的唯一方式是：
el.setAttribute('data-active', 'false') - 删除必须用：
el.removeAttribute('data-active') - 混用会出问题：先
dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo仍返回'a'（缓存未刷新），而getAttribute返回'b'—— 两者已不一致
data-count="42" 读出来是字符串 "42"
所有 data- 值都是字符串，哪怕 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（驼峰转换可能错位键名）
服务端渲染后 el.dataset.userId 可能为空
SSR 输出的 HTML 中，dataset 在首次 JS 执行前不可读（尤其在 document.createElement 或 innerHTML 动态插入后）。此时 el.dataset.userId 可能返回 undefined，但 el.getAttribute('data-user-id') 总能拿到原始字符串。
- 读取 SSR 静态值 → 优先用
el.getAttribute('data-user-id') - 属性名含下划线（如
data-user_id）或大小写混用 →dataset完全忽略，只能用getAttribute - 需要原始字符串（比如带空格、换行、未 parse 的 JSON）→
getAttribute直接返回，不加工
最常被忽略的一点：data-* 的存在本身不触发任何浏览器行为——不重绘、不重排、不通知 JS。它只是个被动容器，一旦你开始依赖它做跨组件通信、异步响应或持久化，就必须立刻交给 useState、store 或 localStorage 管理，而不是继续往 DOM 上堆 data-。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
