data-* 属性必须以 data- 开头，后接小写字母、数字或连字符（不能数字开头）；dataset 读取值恒为字符串，需手动转换类型；修改须用 setattribute，删除用 removeattribute；css 选择器中属性值必须加英文引号。
data-* 属性怎么写才被浏览器识别
必须以 data- 开头，后接全小写、数字或连字符（-），且不能以数字开头；其他命名如 data_userId、data-UserID、data-2024year 全部无效——浏览器压根不解析，DOM 中查不到，dataset 返回 undefined。
-
data-user-id→ ✅ 合法，JS 中读作el.dataset.userId -
data-api-key→ ✅ 合法，对应el.dataset.apiKey -
data-2024-start-date→ ✅ 合法，但只能用el.dataset["2024StartDate"]访问（点号语法不支持数字开头） -
data-userId/data_user_id/data-User-Id→ ❌ 全部被忽略，getAttribute("data-userId")也返回null
dataset 读取值为什么总是字符串
无论你在 HTML 里写的是 data-count="42" 还是 data-active="false"，el.dataset.count 和 el.dataset.active 拿到的永远是字符串。不做类型转换，逻辑就会出错。
-
el.dataset.count + 1得到"421"（字符串拼接），不是43；应写成+el.dataset.count + 1或Number(el.dataset.count) + 1 -
if (el.dataset.active)在data-active="false"时仍为true（非空字符串转布尔为真）；正确判断是el.dataset.active === "true" - 存 JSON 字符串时，别用
el.dataset.config读取——驼峰转换可能错位键名（如data-user-preferences→dataset.userPreferences），推荐JSON.parse(el.getAttribute("data-config"))
修改 data-* 属性为什么 dataset 赋值没用
el.dataset.foo = "new" 看似生效，其实只是改了内存里的映射副本，不会更新 DOM 属性节点，也不会触发 getAttribute() 或 CSS 选择器重新匹配。
- 真正写入 DOM 的唯一方式是：
el.setAttribute("data-foo", "new-value") - 删除必须用：
el.removeAttribute("data-foo")；delete el.dataset.foo完全无效 - 混用会出问题：先
el.dataset.foo = "a"，再el.setAttribute("data-foo", "b")，后续el.dataset.foo仍返回"a"（dataset不刷新）
CSS 选择器匹配 data-* 失败？记得加引号
写 [data-status=active] 是错的——浏览器按标识符解析，不匹配字符串值；必须加英文引号：[data-status="active"] 才能正确命中。
- 错误写法：
[data-user-id=1001]→ 不匹配data-user-id="1001" - 正确写法：
[data-user-id="1001"]→ ✅ 匹配成功 - 引号不可省略，哪怕值是纯数字或单词；CSS 规范要求属性值为字符串时必须引起来
实际项目里最容易忽略的是：dataset 不是响应式代理，它不监听 DOM 变更，也不自动同步新旧值。一旦你用 setAttribute 改了某个 data- 属性，之前通过 dataset 读出来的旧值还在内存里，除非你重新访问 dataset.xxx ——但即使这样，它也只读取当前 DOM 属性快照，不是活绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
