data-*属性名必须全小写加连字符，如data-user-id；驼峰、下划线或大写均无效，浏览器直接忽略；dataset读取自动转驼峰（userid），但值恒为字符串，需手动类型转换，修改必须用setattribute。
data-* 属性名必须全小写+连字符，否则 dataset 读不到
浏览器只解析符合规范的 data-* 属性：前缀 data- 后必须跟至少一个字符，且只能是小写字母、数字或连字符（-），不能有大写、下划线、点号或空格。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 中写了 data-userId="123"——这不是 JS 写错了，是浏览器压根没把它当 data-* 属性处理，DOM 中查不到，dataset 自然为空。
正确命名示例：
-
data-order-id→ JS 中读作element.dataset.orderId -
data-api-endpoint→element.dataset.apiEndpoint -
data-2024-start-date→ 必须用element.dataset["2024StartDate"]访问（点号语法不支持数字开头）
连续连字符如 data-foo--bar 会被转成 fooBar，语义模糊，不推荐。
dataset 是只读代理，改值必须用 setAttribute
element.dataset.xxx = "new" 看似生效，实际只是修改了内存中 dataset 对象的副本，不会同步更新 DOM 属性节点。刷新页面、重新渲染或调用 el.outerHTML 时，原始 HTML 的 data-xxx 值仍保持不变。
真正持久化写入的唯一可靠方式是：
- 设置：
element.setAttribute('data-xxx', 'value') - 删除：
element.removeAttribute('data-xxx') - 读取优先用
element.dataset.xxx（自动驼峰、语义清晰）
混用会出问题：先 dataset.foo = 'a'，再 setAttribute('data-foo', 'b')，后续 dataset.foo 仍返回 'a'——因为 dataset 不是双向绑定，只是初始解析时的一次性映射。
所有 dataset 值都是字符串，类型转换必须手动处理
无论你在 HTML 里写 data-count="42"、data-is-active="true" 还是 data-price="299.99"，通过 dataset 拿到的永远是字符串 "42"、"true"、"299.99"。
典型陷阱：
-
if (el.dataset.isActive === true)→ 永远false -
el.dataset.count + 1→ 得到"421"（字符串拼接）
安全转换建议：
- 布尔值：
const isActive = el.dataset.isActive === "true"（别用Boolean()，"false"也会被转成true） - 数字：
const count = Number(el.dataset.count)或parseFloat() - JSON 数据：
try { JSON.parse(el.dataset.config || '{}') } catch(e) { /* fallback */ }
data-* 不适合存敏感信息或大量数据
所有 data-* 属性都明文暴露在 HTML 源码和 DevTools 中，用户右键“查看页面源代码”就能看到。它不是保密容器。
性能与安全边界：
- 敏感字段（token、手机号、权限标识等）绝对不要放进去；服务端校验不可省略
- 单个
data-*值建议控制在几 KB 内；存整个 JSON 字符串前，先JSON.stringify()，并注意 HTML 实体编码（防 XSS） - 高频变更或复杂状态，优先用 JS 变量、
Map或框架响应式状态，而非反复读写 DOM - Vue/React 中需显式透传：
v-bind="$attrs"或手动解构props，否则组件内部收不到
真正容易被忽略的是：它本质是静态元数据载体，不是状态管理工具。一旦你开始频繁 setAttribute + dataset 读写 + 条件判断，就该考虑换用更合适的数据流机制了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
