data-*属性值始终为字符串，需显式转换类型；命名须全小写加短横线，驼峰或下划线无效；复杂数据应json序列化存取；dataset是只读代理，修改需用setattribute。
data-* 属性只能存字符串，别指望自动转类型
所有写进 data-* 的值，浏览器一律当字符串处理。哪怕你写 data-count="42" 或 data-active="true"，用 dataset.count 拿到的仍是 "42"，dataset.active 是 "true"，不是数字或布尔值。
常见翻车点：
-
if (el.dataset.active === true)→ 永远不成立 -
el.dataset.count + 1→ 得到"421"（字符串拼接） - 直接解构对象或遍历数组失败，因为值根本不是对应类型
正确做法是显式转换：
const count = Number(el.dataset.count); const isActive = el.dataset.active === "true"; const tags = JSON.parse(el.dataset.tags || "[]");
命名必须全小写+短横线，驼峰写法会失效
data-user-id 合法，dataUserId、data_user_id、dataUserID 全部非法——浏览器解析时直接忽略，不会出现在 dataset 中，也查不到。
原因在于 DOM 解析规则：只有带短横线的命名才会被自动映射为驼峰键名。例如：
-
data-user-id→dataset.userId -
data-api-url→dataset.apiUrl -
data-foo-bar-baz→dataset.fooBarBaz
如果用了下划线、点号或连续短横线（如 data-user_name），必须退回到 getAttribute('data-user_name') 才能读取。
复杂数据要 JSON 序列化，但别塞进 value 或 select 标签
想存对象或数组？不能直接写 data-config="{"theme":"dark"}"，更不该把 JSON 塞进 <select></select> 的 value 属性里——那既难维护又易注入风险。
正确路径只有一条：序列化后存在 data-* 里，读取时再反解：
// 存
el.dataset.profile = JSON.stringify({ name: "Alice", roles: ["admin"] });
<p>// 取
const raw = el.dataset.profile;
const profile = raw ? JSON.parse(raw) : {};
</p>
特别注意：
- 务必加空值判断，
dataset.xxx访问不存在属性返回undefined - 不要在
<select></select>上设data-*，应写在每个<option></option>内部，否则无法区分选项上下文 - 避免在循环中高频读写
dataset，会触发重排；先缓存再批量操作
dataset 是只读代理，改它不等于改 DOM
element.dataset 返回的是一个 DOMStringMap，看着像对象，实则是只读代理。执行 el.dataset.foo = "bar" 不会报错，但也不会同步到 HTML 属性上——刷新页面就丢。
真正更新 DOM 的唯一可靠方式是：
el.setAttribute("data-foo", "bar"); // ✅ 生效
el.removeAttribute("data-foo"); // ✅ 移除
反过来，用 setAttribute 更新后，dataset.foo 会立刻反映新值。这个单向映射关系常被误认为“双向绑定”，实际只是读取时的自动映射。
另外，dataset 会自动 trim 值两端空白，而 getAttribute() 返回原始字符串——需要保留空格或换行时，必须绕过 dataset 直接调用后者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
