data-* 属性仅用于存储静态、轻量、非敏感的上下文信息，命名须为小写连字符格式（如data-user-id），JS中通过dataset自动转驼峰访问，写入必须用setAttribute，不可存敏感数据或大段JSON，CSS选择器需加引号，且不支持响应式更新。
data-* 属性不是前端状态容器，它只适合存静态、轻量、非敏感的上下文信息；用错场景（比如当 React state 用、存 token 或大段 JSON）会立刻引发安全或性能问题。
data-* 属性名必须用 kebab-case 小写连字符
浏览器只识别 data-user-id、data-api-endpoint 这类全小写+连字符的写法。data-userId、data_user_id、data-UserID 全部无效——DOM 中查不到，dataset 也取不到。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="123"；根源就是命名不规范，浏览器压根没解析进 dataset。
实操建议：
- HTML 中一律写成
data-order-status、data-item-index - JS 中通过
element.dataset.orderStatus访问（连字符自动转驼峰） - 含数字开头的属性如
data-2024-year，只能用方括号：element.dataset["2024Year"]
dataset 是只读代理，写入必须用 setAttribute
element.dataset.foo = "bar" 看似能改值，实际只是操作内存副本；刷新页面后，原始 HTML 的 data-foo 值不变。真正要持久化，必须调用 setAttribute。
实操建议：
- 读取优先用
element.dataset.xxx（语义清晰、自动转换） - 写入必须用
element.setAttribute('data-xxx', 'value') - 避免混用：
dataset.foo = 'a'和setAttribute('data-foo', 'b')会导致两个值不一致，dataset.foo仍返回'a'
data-* 不该存敏感信息或大量数据
所有 data- 属性都暴露在 HTML 源码和 DevTools 中，用户右键“查看页面源代码”就能看到。同时，过长字符串会拖慢 DOM 解析和序列化。
实操建议：
- 绝对不要放
token、password、手机号等敏感字段 - 单个
data-值建议控制在几 KB 内；超长 JSON 优先用 JS 变量或Map缓存 - 需存对象？先
JSON.stringify(obj)再setAttribute，读取时手动JSON.parse() - 服务端渲染（SSR）输出前，必须对 JSON 字符串做 HTML 实体编码，否则
JSON.parse()易报SyntaxError
CSS 里用 [data-*] 选择器必须加引号
写 [data-status=active] 看似简洁，但一旦值含空格、点号或连字符（如 data-status="in-progress"），这个选择器就完全失效。CSS 规范要求属性值含特殊字符时必须加引号。
实操建议：
- 统一写成
[data-status="active"]或[data-role="menu-item"] - 避免
[data-id]这种无值判断——它匹配任意含该属性的元素，包括data-id=""，容易误伤 - 想排除空值？用
[data-id]:not([data-id=""])
最常被忽略的一点：data-* 属性不会响应式更新，也不触发 MutationObserver；它本质是静态元数据，不是状态同步通道。一旦你开始想“监听 data- 变化”，说明已经用错了地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
