data-*属性需严格遵循全小写加连字符命名规则，js通过dataset访问时自动转驼峰，但数字开头需方括号访问；读写必须统一用setattribute/getattribute，混用导致状态不一致；存取需注意字符串类型转换、json解析及敏感信息规避；ssr/框架中需特殊处理透传，且不可替代状态管理。
data-* 属性不是“随便加个属性就行”的快捷键，而是有硬性命名规则和访问逻辑的原生机制——写错名字，JS 就读不到；混用 API，状态就会错乱。
data-* 属性名为什么写对了还是读不到
根本原因：浏览器只认全小写 + 连字符的命名。写成 data-userId、data_user_id、data-UserID，DOM 解析时直接忽略，DevTools 里都看不到，dataset.userId 当然返回 undefined。
-
data-user-id✅ → JS 中用el.dataset.userId -
data-api-url✅ → JS 中用el.dataset.apiUrl -
data-2024-report✅ → 但必须用el.dataset["2024Report"]（点号无法访问数字开头） -
data-productName❌ → 浏览器不解析，等同于没写
dataset 读写和 getAttribute/setAttribute 能不能混用
不能。混用会立刻导致值不一致：dataset.foo = "a" 只改内存副本；setAttribute("data-foo", "b") 才真正更新 DOM。下次读 dataset.foo 还是 "a"，而 getAttribute("data-foo") 返回 "b" —— 缓存未刷新。
- 读取优先用
el.dataset.xxx（语义清晰、自动驼峰转换） - 写入必须用
el.setAttribute("data-xxx", "value")（否则无法持久化） - 判断是否存在：先用
"xxx" in el.dataset，再取值，避免undefined引发错误 - 删除属性：用
delete el.dataset.xxx，比removeAttribute("data-xxx")更安全
存 JSON 或布尔值时最容易踩的坑
dataset 暴露出来的永远是字符串。存 data-is-pending="false"，读出来是字符串 "false"，不是布尔值 false；存 data-config='{"theme":"dark"}'，读出来是字符串，不是对象。
- 布尔判断别写
Boolean(el.dataset.isPending)→ 改用el.dataset.isPending === "true" - 数字转换用
+el.dataset.count或Number(el.dataset.count)，别直接比较=== 0 - JSON 数据必须手动
JSON.parse(el.dataset.config || "{}")，且加try/catch防止服务端未转义导致语法错误 - 敏感字段如
data-token、data-phone绝对禁止 —— 页面源码里明文可见
服务端渲染或框架里 data-* 属性为什么消失了
SSR 场景下，首次 JS 执行前 dataset 是空的；Vue/React 默认不透传 data-* 属性到根元素，必须显式处理。
- SSR 安全读值：用
el.getAttribute("data-xxx")，它在 HTML 解析后立即可用 - Vue 组件要透传：设
inheritAttrs: false，再手动v-bind="$attrs"到目标元素 - React 组件要透传：筛选出
data-*属性，用{...dataAttrs}展开到对应元素 - 高频读写（如循环中反复取多个
dataset值）会触发隐式布局抖动，建议缓存到变量再批量操作
最常被忽略的一点：data-* 不是状态管理容器。它只适合存静态、低频变更、与渲染无关的上下文信息 —— 比如埋点 ID、弹窗目标、初始配置。把它当购物车数量或权限列表来用，等于把 DOM 当数据库，后续维护成本和性能问题都会指数级上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
