data-*属性是浏览器原生支持的零成本数据通道，需以data-开头、后接字母数字等合法字符，命名自动转换为驼峰式，适用于纯js逻辑驱动的数据，读写应兼顾兼容性与性能。
HTML 的 data-* 属性不是“语法糖”，而是浏览器原生支持的、零成本的数据绑定通道——只要属性名合法，它就自动可用，不触发重排，不依赖框架，也不需要额外解析。
data-* 属性怎么写才合法
浏览器只认一种规则：属性名必须以 data- 开头，后面只能跟字母、数字、下划线 _、短横线 - 或冒号 :（但冒号在部分旧环境有兼容风险，建议避开）；不能全数字，不能含空格或点号。
-
data-user-id✅ 合法，推荐用短横线分隔 -
data_user_id✅ 合法，但 JS 中需用方括号访问：el.dataset["user_id"] -
data-123❌ 非法，不能以数字开头 -
data-user.name❌ 非法，点号会被忽略，实际存为username -
data-user:role⚠️ 理论合法，但 IE 和某些 SSR 工具会出问题，慎用
dataset 读写时的命名自动转换规则
dataset 是 DOM 元素上的只读对象，它把 HTML 中的短横线命名（kebab-case）自动转成驼峰（camelCase），这是最常踩坑的地方——不是“去掉短横线”，而是“短横线后首字母大写”。
<div data-user-id="1001" data-api-url="https://api.example.com"></div>-
el.dataset.userId→"1001"（user-id→userId） -
el.dataset.apiUrl→"https://api.example.com"（api-url→apiUrl） -
el.dataset.user→undefined（没这个键，user-id不会拆成user） - 写入时也按同样规则反向转换：
el.dataset.userId = "1002"会同步更新 HTML 中的data-user-id
什么时候该用 data-*，而不是 class 或自定义属性
核心判断标准：数据是否“仅用于 JS 逻辑驱动”，且无需 CSS 响应、不参与语义化表达。它不是 class 的替代品，也不是 id 的备胎。
- ✅ 适合：
data-track-id（埋点 ID）、data-modal-target（弹窗目标元素 ID）、data-sort-order（当前排序字段） - ❌ 不适合：
data-active代替class="active"—— 这会让 CSS 无法通过属性选择器响应，且失去语义可访问性 - ❌ 不适合：
data-src替代真实src—— 浏览器不会加载它，也不会触发懒加载或预加载 - ⚠️ 注意：服务端渲染（SSR）时，
dataset在首次 JS 执行前是不可读的，得靠getAttribute('data-xxx')安全取值
性能和兼容性底线要守住
data-* 本身无运行时开销，但高频读写 dataset 可能触发隐式布局抖动（尤其在循环中反复读取多个属性），而且 IE11 及更早版本不支持 dataset API。
- 读取单个值优先用
el.getAttribute('data-foo')，比dataset.foo更兼容、更轻量 - 批量读取多个
data-属性时，别遍历dataset，改用el.attributes过滤，避免创建中间对象 - 动态插入带
data-的 HTML 字符串时，确保字符串已完整解析（比如用innerHTML后再查 dataset，而非直接操作字符串） - Vue/React 等框架里，别用
v-bind:data-xxx或data-xxx={val}直接绑定——它们可能被忽略或转义，应统一走setAttribute
真正麻烦的从来不是怎么加 data-*，而是删——上线后没人记得清理废弃的 data- 属性，久而久之变成“前端考古现场”。上线前扫一遍 data-* 使用链，比加十个新属性都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
