修改 data-* 属性必须用 setattribute，dataset 赋值仅更新内存映射，不写入 dom；删除须用 removeattribute，delete dataset.xxx 无效；dataset 仅适合读取已有属性，且值恒为字符串，需手动类型转换。
修改 data-* 属性必须用 setAttribute，dataset 赋值不写入 DOM
直接写 element.dataset.foo = "bar" 看似生效，但只是更新了 JavaScript 内存中的映射副本，不会真正写入 HTML 属性节点。你在 DevTools 里查看 el.outerHTML 或刷新页面后，data-foo 的值还是旧的。
真正持久化修改的唯一方式是：element.setAttribute("data-foo", "bar")。删除同理，必须用 element.removeAttribute("data-foo")，delete element.dataset.foo 完全无效。
常见错误现象：
-
dataset.userId = "789"后，getAttribute("data-user-id")仍返回旧值 - 用 CSS 选择器
[data-status="done"]匹配不到元素——因为属性根本没变 - MutationObserver 监听不到变化——它监听的是 DOM attribute 变更，不是 dataset 对象内部状态
dataset 只适合读取，且只对已存在的 data-* 属性生效
dataset 是只读代理，不是双向绑定。它在元素初始化时解析一次 HTML 中已声明的 data-* 属性，生成驼峰键名映射。之后你用 setAttribute 新增或修改属性，dataset 不会自动刷新；反过来，先 dataset.x = "a" 再 setAttribute("data-x", "b")，后续 dataset.x 仍返回 "a"（缓存未更新）。
所以：
- 首次设置新
data-*属性（比如运行时动态挂载），必须用setAttribute - 读取已有属性优先用
element.dataset.xxx（语义清晰、自动驼峰） - 读取含数字开头、连续连字符或需严格保留原始命名的属性（如
data-2024-start），改用getAttribute("data-2024-start")
值永远是字符串，类型转换必须手动做
无论你在 HTML 里写 data-count="42" 还是 data-active="false"，JavaScript 里拿到的都是字符串 "42" 和 "false"。不转类型，逻辑必然出错：
-
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 字符串（如
data-config='{"theme":"dark"}'），必须用JSON.parse(el.getAttribute("data-config"))，不能用JSON.parse(el.dataset.config)——后者可能因驼峰转换导致键名错位（data-user-preferences→dataset.userPreferences，但原始 JSON 键是user-preferences）
命名不合法 = 浏览器直接忽略，dataset 读不到是常态
浏览器只认严格符合规范的 data-* 属性名：前缀 data- 后必须跟至少一个字符，且只能是小写字母、数字或连字符（-），不能有大写、下划线、点号、空格。
这些写法全部无效，DOM 中查不到，dataset 返回 undefined：
-
data-userId（大写I）→ 实际被当作文本内容处理，不进 dataset -
data_user_id（下划线）→ 浏览器忽略，getAttribute("data_user_id")也返回null -
data-UserID（大写首字母）→ 自动转成dataset.userid（全小写），不是你预期的userId -
data-2024-year→ 合法，但el.dataset.2024Year语法错误（点号不能以数字开头），必须用el.dataset["2024Year"]或getAttribute
最稳妥的命名习惯：全小写 + 连字符分隔，如 data-order-id、data-api-endpoint。别图省事写 dataUserId，那等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
