<p>data-* 属性必须以 data- 开头，后接字母、数字或连字符，用于合法存储自定义数据；通过 dataset API 访问时自动转驼峰命名且值恒为字符串，不可存敏感信息或大量数据，仅适用于轻量标记。</p>
data-\* 属性必须以 data- 开头，且后续只能是字母、数字、连字符（-）
HTML 允许在任何元素上添加自定义属性，但必须以 data- 为前缀，否则不合法。浏览器会忽略非标准属性（比如直接写 role="submit" 或 version="2.1"），而 data- 属性会被保留并可通过 JS 访问。
常见错误是用下划线或大写字母，例如 data_user_id 或 data-UserId —— 这些写法虽然浏览器不会报错，但无法通过 dataset API 正常读取（element.dataset.userId 会是 undefined）。
-
data-user-id→ 可读为element.dataset.userId（连字符自动转驼峰） -
data-api-url→ 对应element.dataset.apiUrl -
data-count→ 对应element.dataset.count（纯字母，无转换） - 避免
data-123、data-_id、data-foo.bar—— 这些不被解析进dataset
用 dataset 读写比 getAttribute/setAttribute 更安全
直接操作 getAttribute('data-xxx') 和 setAttribute('data-xxx', val) 虽然可行，但容易漏掉类型转换和命名映射逻辑。推荐优先用 dataset：
const btn = document.querySelector('button');
btn.dataset.userId = '1001'; // 自动转成 data-user-id
console.log(btn.dataset.userId); // '1001'（始终是字符串）
btn.dataset.isActive = 'true'; // 写入字符串
console.log(btn.hasAttribute('data-is-active')); // true注意：dataset 的值永远是字符串，即使你赋值 true 或 42，它也会被转成 'true' 或 '42'。需要布尔或数字时得手动转换。
立即学习“前端免费学习笔记（深入）”；
- 写入
null或undefined会移除该属性（delete btn.dataset.userId也等效） - 读取不存在的
dataset.xxx返回空字符串，不是undefined - 若需存 JSON 或复杂结构，建议用
JSON.stringify()后写入，读取再JSON.parse()
data-\* 不适合传敏感信息或大量数据
data- 属性本质是公开的 HTML 源码一部分，任何用户都能右键查看元素、看到所有 data- 值。别放 token、密码、用户手机号等。
另外，大量数据塞进 data- 会让 HTML 膨胀，影响首屏解析速度，也增加 JS 解析开销。比如把整个用户对象序列化后塞进 data-user-info，不如用 API 按需加载。
- 适合场景：按钮的 ID、状态标识（
data-status="pending"）、简单配置（data-modal-target="#edit-form"） - 不适合场景：JWT token、加密密钥、长文本内容、二进制 base64
- 如果只是临时传参给事件处理器，考虑用
event.currentTarget+ 闭包，或用Map缓存关联数据，而非依赖 DOM 属性
React/Vue 等框架里 data-\* 仍有效，但别和 props 混用
框架组件渲染出的 DOM 元素照样支持 data- 属性，JS 依然能读取。但要注意：框架通常会过滤掉非标准 prop，所以不能靠 props['data-id'] 获取 —— 得在渲染时显式透传：
<button data-user-id={user.id} onClick={handleClick}>编辑</button>Vue 中类似：<button :data-user-id="user.id">。不要试图在组件内部用 this.$attrs['data-user-id'] 来代替明确绑定，因为某些框架版本可能不透传 data- 属性。
- 框架里优先用 state/props 管理逻辑数据，
data-只用于“给 JS 查询用的轻量标记” - 避免在 Vue 的
v-for中为每个项生成重复的data-，性能差且难维护 - SSR 场景下，
data-是唯一能在服务端注入、客户端 JS 直接读取的跨端桥梁（比window.__INITIAL_DATA__更轻量）
实际项目里，data- 最常被忽略的是命名规范和类型隐式转换——写的时候图方便用 data-id，结果 JS 里误以为它是 number；或者多个团队成员混用 data-item-id 和 data-id，导致 selector 错乱。这类细节不报错，但查起来费时间。
