<p>data-* 属性必须用小写连字符命名，如 data-user-id；JS 通过 dataset 访问时连字符转驼峰，但修改需用 setAttribute；不可存敏感信息或大量数据；框架中需显式透传，且不具响应性。</p>
data-\* 属性必须用小写连字符命名，不能驼峰或下划线
浏览器只认 data- 开头、后接小写字母和连字符（-）的属性，比如 data-user-id 合法，data-userId、data_user_id、data-UserID 全部被忽略——DOM 中查不到，JavaScript 也取不到。
常见错误现象：element.dataset.userId 返回 undefined，但检查 HTML 发现写了 data-userId="123"；其实是命名不规范导致浏览器没解析进 dataset 对象。
正确做法：
- 全部用小写字母 + 连字符，如
data-order-status、data-api-endpoint - JS 中通过
dataset访问时，连字符自动转为驼峰，data-order-status→element.dataset.orderStatus - 若属性名含数字开头（如
data-2024-year），JS 无法通过点号访问，得用方括号：element.dataset["2024Year"]
dataset 是只读代理，修改它不会同步更新 HTML 属性
element.dataset.xxx = "new" 看似能改值，实际只是操作内存中的副本；刷新页面或重新渲染后，原始 HTML 的 data-xxx 值不变。真正要持久化，必须调用 setAttribute。
立即学习“前端免费学习笔记（深入）”；
使用场景：比如按钮点击后标记“已加载”，你想让后续逻辑判断状态，又希望 DevTools 里能一眼看到变化。
实操建议：
- 读取用
dataset（方便、自动类型转换为字符串） - 写入必须用
element.setAttribute('data-xxx', 'value') - 不要混用：
dataset.foo = 'a'; setAttribute('data-foo', 'b')会导致两个值不一致，dataset.foo仍返回'a'（缓存未刷新）
data 属性不适合存大量数据或敏感信息
所有 data- 属性都暴露在 HTML 源码和 DevTools 中，用户右键“查看页面源代码”就能看到。同时，过长的值会拖慢 DOM 解析和序列化（比如存整个 JSON 字符串）。
性能与安全影响：
- 单个
data-值建议控制在几 KB 内；超长字符串优先考虑 JS 变量或Map缓存 - 绝对不要放 token、密码、用户手机号等敏感字段
- 需要服务端校验的数据（如权限标识），不能只靠
data-permission="admin"做前端判断 - JSON 数据建议先
JSON.stringify再塞入，读取时手动JSON.parse，别指望浏览器自动解析
Vue/React 中 data 属性常被框架忽略，需显式透传
框架组件默认不把 data- 属性自动挂到根元素上。比如你在 Vue 组件调用处写 <MyButton data-tracking-id="click-home">，但组件模板里没声明接收，这个属性就丢了。
实操建议：
- Vue：用
v-bind="$attrs"或inheritAttrs: false+ 手动绑定到目标元素 - React：用
{...props}展开，或筛选出data-*属性再Object.assign到元素 - 原生 Web Component：记得在
render()中把this.getAttribute('data-xxx')显式写进 template
最常被忽略的一点：data 属性不是响应式的。哪怕你用 setAttribute 改了值，绑定它的前端框架或自定义事件监听器也不会自动触发更新——得自己发 CustomEvent 或调用回调。
