data-*属性仅适合存静态元信息，非状态容器；命名须全小写加连字符，否则浏览器忽略；读取推荐getattribute，写入必须setattribute，值恒为字符串，严禁存储敏感数据或用于响应式控制。
data-* 属性只能存静态元数据，不是状态容器
它不响应变更、不触发重绘、不支持类型自动转换——dataset 读出来的永远是字符串，setAttribute 写进去的也不会让框架重新渲染。把它当 React 的 state 或 Vue 的响应式字段用，DOM 和 JS 值很快就会对不上。
命名必须全小写 + 连字符，否则浏览器直接忽略
常见错误：写 data-userId、data_user_id、data-UserID，结果 element.dataset.userId 返回 undefined。这不是 JS 错了，是浏览器压根没把它们当 data- 属性解析。
- ✅ 合法：
data-user-id、data-api-endpoint、data-product-sku - ❌ 失效：
data-userId、data_user_id、data-2024-year（数字开头需方括号访问） - 含数字开头的属性如
data-2024-year，JS 中只能用element.dataset["2024Year"]
读写必须区分：getAttribute 优先，dataset 仅作便捷读取
dataset 是只读映射，赋值不更新 DOM；getAttribute 才能拿到真实 HTML 属性值，且对非法命名更宽容（比如 data-userId 虽进不了 dataset，但 getAttribute("data-userId") 可能取到）。
- 读取推荐用
getAttribute("data-user-id")，避免命名不规范导致静默失败 - 写入必须用
setAttribute("data-user-id", "123")，dataset.userId = "123"不会同步到 DOM - 删除必须用
removeAttribute("data-user-id")，delete element.dataset.userId无效 - 值恒为字符串：
data-count="42"→Number(el.getAttribute("data-count"))才得数字
适合存什么、不适合存什么，边界很清晰
它只该存“一次写入、极少变更、与渲染无关”的轻量上下文信息，比如埋点 ID、SKU 编号、服务端预置的提示文案。别塞 JSON、token、手机号，也别指望靠 data-active="true" 控制组件开关逻辑。
- ✅ 推荐场景：
data-track-id（埋点）、data-product-sku（服务端渲染后供 JS 补交互）、data-tooltip-content（纯展示文案） - ❌ 禁止场景：存 JWT token、用户手机号、整段配置 JSON（超几 KB 就拖慢 DOM 解析）
- CSS 中用
attr(data-value)必须加引号：content: "评分：" attr(data-score); - Vue/React 中需显式透传：
v-bind="$attrs"或{...props}，否则data-属性会被框架丢弃
真正难的不是怎么写，而是判断“这东西到底该不该放 data-* 里”。只要发现需要频繁修改、参与条件渲染、或涉及权限校验，就该立刻换到 JS 变量、Map 或服务端接口里去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
