必须使用data-前缀，因为HTML5规定只有data-属性才是合法自定义属性，能统一通过dataset或getAttribute访问，避免浏览器兼容性问题和未来命名冲突。
直接用 data-* 是唯一安全、标准且跨浏览器兼容的自定义属性绑定方式；其他写法（比如 myattr="value" 或 custom-id="123"）在现代浏览器中虽能“存”，但读取逻辑不统一，容易出错。
为什么必须用 data- 前缀
HTML5 明确规定：只有以 data- 开头的属性才是合法自定义属性。浏览器会将其纳入元素的 dataset 对象，同时保证 DOM API（如 getAttribute、dataset）能一致访问。非 data- 属性属于“未知特性”，不同浏览器解析行为可能不同——比如旧版 Firefox 会忽略，Chrome 可能保留但不暴露给 dataset。
- 不加
data-的属性（如uid="100"）无法通过element.dataset.uid读取 -
element.getAttribute("uid")虽然能拿到值，但无法被 CSS 选择器[uid="100"]稳定匹配（部分浏览器不支持） - 未来 HTML 标准可能引入同名原生属性，造成冲突
dataset 与 getAttribute 的实际差异
两者都能读写 data- 属性，但行为和适用场景不同：
-
element.dataset.fooBar→ 对应 HTML 中data-foo-bar，自动把连字符转驼峰；写入时也自动反向转换 -
element.getAttribute("data-foo-bar")→ 原样读取字符串，大小写敏感，不处理命名转换 - 如果属性名含数字或特殊字符（如
data-user-id-2024），dataset会映射为element.dataset.userId2024；而getAttribute必须写全名 -
dataset只对data-属性生效；getAttribute可读任意属性（包括id、class等）
动态绑定时的常见陷阱
用 JS 动态设置自定义属性，最容易踩的是命名和类型混淆：
- 写
el.dataset.userId = 123→ 实际生成data-user-id="123"（自动转字符串） - 写
el.setAttribute("data-user-id", 123)→ 同样生成字符串，但不会触发dataset更新（需手动同步） - 不要用
el["data-user-id"] = "abc"—— 这是无效赋值，DOM 属性不存在该字段 - 避免双连字符：
data-user--id不合法；data-user_id虽不报错，但dataset无法映射（下划线不转驼峰） - Vue/React 等框架中，直接在模板写
data-*属性即可，无需额外指令；但通过响应式数据动态生成时，仍要确保属性名符合data-规则
什么时候不该用 data-
data- 本质是“携带只供 JS 消费的元数据”，不是状态容器。以下情况应换方案：
- 需要频繁读写的开关型状态（如是否展开）→ 改用
aria-expanded或 class 控制，更语义且利于可访问性 - 存储大量结构化数据（如数组、嵌套对象）→ 应序列化后存在
data-，或改用Map/WeakMap关联 DOM 元素 - 需要 CSS 响应式样式控制 →
data-可配合属性选择器（[data-status="loading"]），但若逻辑复杂，优先考虑 class 切换 - 服务端渲染时需初始值 →
data-安全可用；但注意 SSR 和 CSR 渲染时机差可能导致首次 JS 读取为空
真正关键的不是“能不能加”，而是“加完怎么稳定读取”——只要坚持 data- 前缀 + dataset 或 getAttribute 显式调用，就避开了 90% 的兼容性坑。其他写法看着省事，调试时反而更费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
