data-*属性是html5原生支持的自定义数据通道，须以data-开头、全小写加连字符命名（如data-user-id），浏览器自动转为驼峰式访问（dataset.userid），值恒为字符串，读写需注意兼容性与安全性。
data- 属性是 HTML5 原生支持的、用于在 DOM 元素上存储自定义数据的机制。它不参与渲染，也不影响语义，但能被 JavaScript 便捷读写——适合存临时状态、服务端预置参数、或跨组件传递轻量上下文。
如何正确命名和设置 data- 属性
浏览器只认以 data- 开头、后接至少一个字符的属性名，且连字符会自动转为驼峰（如 data-user-id → dataset.userId）：
<button data-user-id="123" data-is-pending="true" data-api-endpoint="/api/v1/users">提交</button>
注意以下限制：
-
data-后不能跟数字开头（data-1id非法），也不能含大写字母（data-UserId会被转成dataset.userid，丢失大小写） - 值始终是字符串，即使你写
data-count="0"，dataset.count也是"0"，需手动转类型 - 避免存敏感信息（如 token、密码），因为它们会暴露在 DOM 中
用 JavaScript 读写 dataset 的常见陷阱
element.dataset 是只读对象，但它的属性可写；不过直接赋值不会同步更新 HTML 属性，要用 setAttribute 才能双向一致：
const btn = document.querySelector('button');<br>console.log(btn.dataset.userId); // "123"<br>btn.dataset.isPending = "false"; // ✅ 更新 dataset，但 HTML 中仍显示 data-is-pending="true"<br>btn.setAttribute('data-is-pending', 'false'); // ✅ 同时更新 dataset 和 HTML
更稳妥的做法是统一用 getAttribute/setAttribute 操作原始字符串值，尤其当你要存布尔、数组或对象时：
- 存布尔：用
hasAttribute('data-active')判断存在性，而非dataset.active === "true" - 存 JSON：先
JSON.stringify再设值，读取后JSON.parse，但注意 XSS 风险（仅限可信数据） - 动态生成属性名：用
setAttribute('data-' + key, value)，别硬拼dataset[key]（不支持变量键）
哪些场景适合用 data-，哪些该换方案
data- 本质是“DOM 附着式元数据”，适用前提是：数据与特定元素强绑定、生命周期短、不需响应式更新。
- ✅ 合理场景：按钮点击前记录目标 ID（
data-item-id）、列表项缓存分页偏移（data-offset）、服务端模板注入初始配置（data-config） - ❌ 不适合场景：频繁变更的状态（如实时计数器）、需要 Vue/React 响应式的 UI 状态、大量结构化数据（应走 JS 对象或状态管理）
- ⚠️ 替代建议：纯逻辑状态优先用
Map或闭包变量；需持久化考虑localStorage；复杂交互推荐用自定义事件传参，而非反复查dataset
真正容易被忽略的是：data- 值一旦写入就一直留在 DOM 上，如果元素被复用（比如表格行重渲染），旧的 data- 属性不会自动清除——得手动 removeAttribute 或重置，否则可能引发静默逻辑错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
