dataset api 是修改 data-* 属性的首选方式，它自动转换 kebab-case 为 camelcase、语义清晰且适合批量读写；但仅适用于合法命名（小写字母+连字符），数字开头、大写字母或下划线需用 setattribute/getattribute。
dataset API 是修改 data-* 属性的首选方式
直接用 dataset 比 setAttribute 更安全、更语义清晰，尤其适合批量读写 data- 开头的自定义属性。它自动处理 kebab-case 到 camelCase 的转换，避免手写错属性名。
常见错误现象：写 element.dataset.userId 却在 HTML 里写成 data-user-id —— 这是对的；但若写成 data-userID 或 data-UserId，dataset.userid 就取不到值，因为规范只识别小写字母+连字符组合。
-
div.dataset.theme = "dark"→ 生成data-theme="dark" -
div.dataset.apiVersion = "2.1"→ 生成data-api-version="2.1" - 删除用
delete div.dataset.theme，不是div.dataset.theme = null - 设空字符串
div.dataset.flag = ""会生成data-flag=""，不是移除属性
setAttribute 和 getAttribute 仍适用于非标准命名或服务端渲染场景
当 HTML 是后端（如 PHP）动态生成，且 data- 名含大写字母、下划线或数字开头（如 data_USER_ID），dataset 无法映射，此时必须用 setAttribute/getAttribute。
注意：这两个方法操作的是 HTML 属性字符串，不触发驼峰转换，也不过滤非法字符。传入的值会被强制转为字符串，setAttribute('data-count', 42) 最终存为 "42"。
- 设置：
el.setAttribute('data-user_id', userId)（下划线保留） - 读取：
el.getAttribute('data-timestamp')返回原始字符串，可能为null - 移除属性必须用
el.removeAttribute('data-temp')，dataset.temp = undefined不生效
别混用 dataset 和 setAttribute 修改同一属性
同一个 data- 属性被两种方式反复修改，容易出现状态不一致。例如：
el.dataset.count = "1";
el.setAttribute('data-count', '2');
console.log(el.dataset.count); // 输出 "2"（同步了）
el.setAttribute('data-count', '3');
el.dataset.count = "4";
console.log(el.getAttribute('data-count')); // 输出 "4"
看似同步，但实际依赖浏览器实现细节。更危险的是：如果先用 setAttribute 写了 data-user-id，再用 dataset.userId 读，能读到；但若先写 data-userId（非法命名），dataset.userid 就永远读不到。
- 统一选一种方式，项目初期就定好规范
- 组件库或框架内建议封装统一的 data 工具函数，屏蔽底层差异
- 服务端注入的 data 属性，前端优先用
getAttribute读，避免驼峰映射失败
data 属性不适合存大量或敏感数据
data- 是公开暴露在 DOM 中的，任何用户都能在开发者工具里看到。它设计初衷是“轻量结构化元数据”，不是存储容器。
性能上，过多 data- 属性会增大 HTML 体积、拖慢解析，也增加 dataset 对象初始化开销。Chrome DevTools 的 Elements 面板里展开 dataset 时卡顿，往往就是这个原因。
- 不要存 JSON 字符串（如
data-config='{"a":1,"b":2}'），改用JSON.parse(el.dataset.config)前先校验非空 - 用户 token、密码、完整列表数据等，一律走 JS 变量或 IndexedDB，别塞进
data- - 需要响应式更新的业务状态（如“是否已点赞”），优先用组件 state，而非反复读写
dataset
真正麻烦的从来不是怎么写进去，而是写进去之后谁在读、什么时候读、读错了有没有 fallback。data 属性看着简单，但跨团队协作时命名冲突、大小写误判、服务端/前端解析不一致，三天两头出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
