<p>data-* 属性仅适合存初始化即确定且极少变更的元信息，频繁用作状态会导致字符串比较错误、框架不响应变更、页面刷新丢失等三坑，且不参与表单提交、无保密性，应优先使用 JS 变量或状态管理。</p>
data-* 属性不是状态容器，别当 useState 用
它只适合存初始化时就确定、后续极少变更的元信息，比如 data-component="chart"、data-track-id="btn-submit-01"。一旦你把它当状态用——比如频繁改 data-cart-count 或监听 data-user-permissions 做权限判断，就会掉进三个坑：
- 所有值都是字符串：
data-count="42"读出来是"42"，直接if (el.dataset.count > 10)是字符串比较，“2” > “10” 返回true - 框架不响应变更：React/Vue 组件挂载后调
el.setAttribute('data-id', '500')，组件不会重渲染 - 刷新即丢：页面 reload 后，之前 JS 写入的
data-全部消失，除非你同步写到localStorage或服务端
dataset.xxx = "val" 不会真正写入 HTML
这行代码只是更新了内存里 dataset 的代理副本，el.outerHTML 里看不到变化，服务端抓取的 HTML 也还是旧值。真要持久化，必须走原生 API：
- 写入：
el.setAttribute('data-user-id', '123') - 删除：
el.removeAttribute('data-user-id') - 读取优先用
el.dataset.userId（语义清晰、自动驼峰），但要注意：如果之前混用过setAttribute，dataset可能缓存旧值，此时应统一用getAttribute
命名不合规，JS 读不到不是 bug 是规范
浏览器只认严格符合规范的 data- 属性：前缀后必须是小写字母、数字或连字符（-），不能有大写、下划线、点号、空格或中文。常见失效场景：
-
data-userId="123"→dataset.userId返回undefined（浏览器压根没解析它） -
data-1st-item="active"→dataset.1stItem语法错误，只能用dataset["1stItem"] -
data-api-endpoint="https://api.example.com"→ 正确，JS 读作dataset.apiEndpoint；但data-URL会被忽略（URL含大写，不合法）
表单提交时 data-* 完全被忽略
无论你给 <input> 加多少 data-，它们都不会出现在 FormData 或后端 request.POST 里。这不是遗漏，是规范设计——data- 只用于 JS 初始化或 CSS 样式控制。
立即学习“前端免费学习笔记（深入）”；
- 想传额外参数？得在 JS 中显式读取：
form.addEventListener('submit', e => { e.preventDefault(); const userId = e.target.querySelector('[name="email"]').dataset.userId; fetch(...).then(...) }) - 别把
data-validation-rules当后端校验依据，后端根本收不到 - 敏感数据如
data-token别放 HTML 里，前端可查，毫无保密性
真正难的不是怎么写，是判断该不该写——每次往 DOM 上加 data-，先问一句：这个值是否只服务于当前元素的初始渲染或简单交互？如果不是，就该交给 JS 变量或状态管理。
