data-*属性命名必须全小写加连字符，如data-user-id；驼峰、下划线或大写均无效，浏览器直接忽略；dataset自动转驼峰（userid），但值恒为字符串，需手动类型转换。
data-* 属性命名必须全小写加连字符
浏览器解析时会把所有 data-* 属性名强制转为小写，并将连字符（-）自动映射为驼峰形式。写错命名等于白写，DOM 中根本不会出现该属性。
-
data-user-id="123→ ✅ 正确，JS 中可通过el.dataset.userId读取 -
data-userId、data_user_id、data-UserID→ ❌ 全部无效，el.dataset中查不到，getAttribute("data-userId")也返回null -
data-2024-start-date→ ✅ 合法，但 JS 中只能用el.dataset["2024StartDate"]，不能用点号访问 - 属性名不能以数字开头（如
data-123abc），也不能含空格、下划线或中文标点
dataset 不能直接赋值，改值必须用 setAttribute()
el.dataset.xxx = "new" 看似生效，其实只是更新了内存中的映射副本，DOM 节点本身没变，CSS 选择器不匹配，后续 getAttribute("data-xxx") 仍返回旧值。
- 正确写法：
el.setAttribute("data-xxx", "new-value") - 删除属性必须用：
el.removeAttribute("data-xxx")，delete el.dataset.xxx无效 - 混用风险：先
dataset.foo = "a"，再setAttribute("data-foo", "b")，之后dataset.foo仍返回"a"（缓存未刷新）
data-* 值永远是字符串，类型转换必须手动做
哪怕你写的是 data-count="42" 或 data-active="false"，读出来都是字符串。不做转换，逻辑很容易跑偏。
-
el.dataset.count + 1得到"421"（字符串拼接），应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔为真），正确判断是el.dataset.active === "true" - 存 JSON 字符串时，推荐用
el.getAttribute("data-config")读取再JSON.parse()，避免dataset.config因驼峰转换导致键名错位（比如data-user-preferences→dataset.userPreferences，但原始键是user-preferences）
CSS 选择器匹配 data-* 属性必须加引号
不加引号的写法会被浏览器当作标识符解析，不是字符串匹配，极易失效。
-
[data-status="active"]→ ✅ 正确，能匹配data-status="active" -
[data-status=active]→ ❌ 错误，浏览器按标识符解析，不匹配任何值 - 带连字符或特殊字符的值（如
data-role="admin-editor"）必须加引号，否则选择器失效
最常被忽略的一点：data-* 是元信息容器，不是状态管理器。它适合存轻量、静态、意图明确的标识（如 data-action="save"、data-key="timeout_ms"），不适合存大量结构化数据或频繁变更的状态——那种场景该交给 JavaScript 变量或专门的状态库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
