data-属性仅适用于存静态、低频、与渲染无关的上下文信息；命名须全小写加连字符，读写必须用dataset api，值恒为字符串，禁存敏感信息或高频状态。
HTML 的 data- 属性不是“前端状态容器”，它只适合存静态、低频变更、与渲染无关的上下文信息；用它存购物车数量、用户权限或实时开关，等于把 DOM 当数据库用，后续维护和性能都会出问题。
data- 属性命名必须全小写+连字符，否则 JS 读不到
浏览器只识别严格符合规范的 data- 属性：开头是 data-，后面只能是小写字母、数字、连字符（-），不能有大写、下划线或空格。写成 data-userId 或 data_user_id，DOM 解析时直接忽略——你在 DevTools 里都看不到它，dataset.userId 肯定返回 undefined。
常见错误现象：element.dataset.productId 是 undefined，但 HTML 里明明写了 data-productId="123"；根源就是命名违规。
-
data-order-status→ ✅ 正确，JS 中通过element.dataset.orderStatus访问 -
data-2024-report→ ✅ 合法，但 JS 中必须用element.dataset["2024Report"]（点号无法访问数字开头） -
data-apiEndpoint→ ❌ 浏览器不认，等同于没写
读写必须用 dataset API，别混用 getAttribute/setAttribute
dataset 是专为 data- 设计的语义化接口，自动处理连字符→驼峰转换，且兼容 IE11+。而 getAttribute 返回原始字符串，setAttribute 不触发 dataset 更新，两者混用会导致值不一致。
比如你执行了 el.setAttribute("data-is-pending", "false")，再读 el.dataset.isPending 可能还是旧值——因为 dataset 缓存未刷新（尤其在旧版 Chrome 中）。
- 读取优先用：
if ("userId" in el.dataset) { id = el.dataset.userId; } - 写入优先用：
el.dataset.isLoading = "true"（自动转为data-is-loading="true"） - 设为空或删除：
delete el.dataset.isLoading，而不是赋值null或""
data- 值永远是字符串，复杂数据要手动序列化
无论你存的是布尔、数字还是对象，dataset 暴露出来的全是字符串。写 data-count="0"，读出来是 "0"；写 data-config='{"theme":"dark"}'，读出来是字符串，不是对象。
容易踩的坑：直接拿 dataset.count === 0 做判断，结果永远是 false；或者没 JSON.parse 就当对象用，报 TypeError: Cannot read property 'theme' of undefined。
- 数字转换：
Number(el.dataset.count)或+el.dataset.count - 布尔判断：
el.dataset.isActive === "true"（别用Boolean("false") === true） - 对象/数组：
JSON.parse(el.dataset.config || "{}")，并加 try-catch 防止格式错误
别把敏感信息或高频状态塞进 data- 属性
data- 属性完全暴露在 HTML 源码里，右键“查看页面源代码”就能看到。存 data-token="abc123" 或 data-phone="138****1234"，等于把钥匙贴在门上。
同时，DOM 是昂贵的操作目标。在循环里反复读写 dataset（比如渲染 100 个商品项并标记“已加入购物车”），会频繁触发重排/重绘，比缓存到 Map 或普通对象慢一个数量级。
- 敏感字段：token、手机号、权限列表 → 全部后端校验，前端只存必要标识（如
data-role="user"） - 高频状态：购物车数量、表单校验结果、折叠展开态 → 放 JS 变量或状态管理库，DOM 只负责最终呈现
- 超长内容：避免塞整个 JSON 字符串；几 KB 以内可接受，超过建议用
Map缓存 + ID 关联
真正难的不是怎么写 data-，而是每次想往里塞东西时，先问一句：这个值是否真的需要“附着在 DOM 上”？如果答案是否定的，就别碰它——DOM 不是你的状态仓库，只是它的投影面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
