data-* 属性仅用于存储静态元数据，命名须全小写加连字符，js 通过 dataset 读取（自动驼峰转换但值均为字符串），写入必须用 setattribute，不可用于动态状态管理或敏感信息存储。
data-* 属性不是用来“保存状态”的，而是为元素附加与渲染无关的静态元数据——比如 data-product-id、data-tracking-id 这类只读上下文信息。用错场景（如存开关状态、用户输入临时值）会导致 DOM 膨胀、调试困难、类型混乱。
data-* 属性名必须全小写+连字符，否则浏览器直接忽略
浏览器只识别符合规范的 data- 属性：前缀后至少一个字符，且只能是小写字母、数字或连字符（-），不能含大写、下划线、点号、空格。常见失效写法：
-
data-userId="123"→ 浏览器不解析，element.dataset.userId返回undefined -
data_user_role="admin"→ 下划线不被识别，dataset 里查不到 -
data-API-KEY="abc"→ 大写字母导致整个属性被跳过
正确命名示例：data-user-id、data-api-key、data-order-date。JS 中对应读取为 element.dataset.userId、element.dataset.apiKey、element.dataset.orderDate。
读取时优先用 dataset，但要警惕类型和命名陷阱
dataset 提供驼峰式访问，语义清晰，但所有值都是字符串，且对非法命名静默失败。实际使用中需注意：
- 数值或布尔语义需手动转换：
parseInt(element.dataset.count)、element.dataset.active === "true" - 属性名含数字开头（如
data-2024-id）不能用点语法，必须写element.dataset["2024Id"] - 连续连字符（如
data-foo--bar）会被转成fooBar，语义模糊，应避免 - 若不确定命名是否规范，直接用
element.getAttribute("data-user-id")更可靠——它不转驼峰、不校验、不静默，返回原始字符串
写入必须用 setAttribute()，dataset.xxx = 不会更新 DOM
dataset 是只读代理，它的赋值操作（如 el.dataset.status = "done"）只改内存副本，不会同步到 DOM 属性节点。刷新页面或检查 el.outerHTML 就会发现原始 data-status 没变。真正生效的写法只有：
- 设置：
el.setAttribute("data-status", "pending") - 删除：
el.removeAttribute("data-status") - 若需动态更新并让其他脚本/框架感知，必须走
setAttribute；混用dataset赋值和setAttribute会导致值不一致（dataset缓存旧值）
CSS 和埋点也能直接用 data 属性，但别当状态管理器用
data- 属性可被 CSS 属性选择器匹配，例如：[data-status="error"] { color: red; }；也可用于无 JS 场景下的基础交互（如 hover 提示）。在前端埋点中，常用来标记可追踪元素：<button data-event="click-add-to-cart" data-sku="A7-B2X"></button>。但要注意：
- 敏感信息（token、密码、用户身份标识）绝不可塞进
data-属性，存在 XSS 风险 - 大量动态状态（如表单校验结果、折叠展开态）应交由 JS 状态变量或
aria-属性处理，data-只负责初始上下文 - 存储 JSON 字符串（如
data-config='{"theme":"dark"}'）可行，但需JSON.parse()解析，且无法被 CSS 直接消费
最易被忽略的一点：data 属性一旦写入就长期留在 DOM 中，不像 JS 变量可被 GC 回收。滥用会导致内存占用上升、DevTools 查看混乱、服务端 SSR 渲染时冗余输出增多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
