data属性命名需小写且用连字符分隔，js中dataset自动转为驼峰式（如data-user-id→userid）；所有值均为字符串，需手动转换类型；动态修改须用setattribute而非直接赋值dataset；兼容ie11+，但ios safari 6–9.3对多连字符支持异常。
data属性命名规则和dataset键名转换关系
HTML里写的 data- 属性，JS中通过 dataset 读取时，会自动做驼峰转换：连字符（-）被移除，后续字母大写。比如 data-user-id → dataset.userId，data-api-key → dataset.apiKey。
注意：全小写无连字符的属性，如 data-id，直接对应 dataset.id；但 data-ID 或 data-Id 这类写法无效——浏览器只识别小写 data- 前缀，且忽略大小写，最终都转成小写再处理，所以别这么写。
常见错误现象：dataset.userid 或 dataset.UserID 都读不到值，必须用 dataset.userId（假设原属性是 data-user-id）。
dataset读取返回值类型全是字符串
dataset 返回的所有值都是 string 类型，哪怕你写的是数字、布尔或 JSON 字符串，它也当纯文本返回。比如 <div data-count="42"></div>，el.dataset.count 是 "42"，不是 42；data-active="true" 得到的是 "true"，不是布尔值 true。
使用场景里常需要手动转换：
- 数字：用
Number(el.dataset.count)或一元加号+el.dataset.count - 布尔：用
el.dataset.active === "true"（推荐显式比较），别用Boolean(el.dataset.active)——因为非空字符串都为true，"false"也会被转成true - JSON：先检查是否为空字符串，再用
JSON.parse(el.dataset.config)
dataset不能读取动态添加的data属性（除非用setAttribute）
如果 JS 后续用点号赋值方式修改 dataset，比如 el.dataset.foo = "bar"，这**不会**同步更新 DOM 上的 data-foo 属性，也不会触发 attributeChangedCallback（如果用了自定义元素）。更关键的是：后续用 getAttribute("data-foo") 读不到，用 dataset.foo 却能读到——这是内存副本，不是真实属性。
正确做法是统一用 setAttribute：
el.setAttribute("data-foo", "bar"); // 这样 DOM 和 dataset 都同步
或者用 removeAttribute 清除：
el.removeAttribute("data-foo");
容易踩的坑：在 Vue/React 等框架里，直接操作 dataset 赋值，可能和虚拟 DOM 的 diff 行为冲突，导致下次渲染时被覆盖。
兼容性与性能注意点
dataset 在 IE11+、Edge 12+、Chrome 26+、Firefox 22+、Safari 6.1+ 都支持，但 iOS Safari 6–9.3 有 bug：对含多个连续连字符的属性（如 data-foo--bar）转换异常，建议避免这种写法。
性能上，dataset 是个 getter，每次访问都会解析属性名并做转换，高频读取时（比如动画帧内）不如缓存一次结果：
const { userId, config } = el.dataset;
另外，大量使用 data- 属性会增加 HTML 体积，影响首屏解析速度；敏感信息（如 token、用户 ID）不该放 data- 里——它完全暴露在源码中，毫无安全性可言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
