dataset不是对象数据库，只是dom解析后的一次性字符串映射；存对象需手动json.stringify()，读取须json.parse()，且所有值默认为字符串，不处理类型，直接访问属性会报错。
直接说结论：dataset 不是对象数据库，它只是 DOM 解析后的一次性字符串映射；存对象必须序列化，读取必须手动 JSON.parse()，且所有值默认都是字符串——不处理类型，运行时必出错。
data-* 属性名写成 data-config 却读不到 dataset.config
根本不是 JS 写错了，是浏览器压根没把它当 data-* 属性解析。只有全小写 + 连字符的命名才有效：
-
data-api-config→ 可读为dataset.apiConfig -
data-config-json→ 可读为dataset.configJson -
data-config→ 合法但无驼峰转换，只能用dataset.config（注意：这里 config 没连字符，不会被转，所以能直接点） -
data-configObject→ ❌ 大写字母被忽略，DOM 中不存在该属性，dataset.configObject返回undefined
真正保险的读法永远是：el.getAttribute('data-config')，不依赖命名规则，不自动转驼峰，不静默失败。
dataset.config 读出来是字符串，不是对象
哪怕你在 HTML 里写了 data-config='{"theme":"dark","count":5}'，JS 里拿到的仍是原始字符串，不是 Object。直接解构或访问 .theme 会报 Cannot read property 'theme' of undefined。
- 安全解析写法：
const config = JSON.parse(el.dataset.config || '{}'); - 必须加
try/catch，服务端若未转义引号或传了非法 JSON，JSON.parse会直接崩溃 - 别信
el.dataset.config?.theme—— 因为el.dataset.config是字符串，没有theme属性 - 数字字段如
"count":5在 JSON 字符串里是数字，但经JSON.parse后才是真数字；不 parse 就用+config.count会出错
修改 dataset.config 后，getAttribute('data-config') 没变
这是最常被忽略的同步问题：dataset 是只读映射，不是响应式代理。你写 el.dataset.config = '{"theme":"light"}'，只是改了内存里的副本，DOM 属性节点本身没更新。
- 真正生效的写法只有：
el.setAttribute('data-config', '{"theme":"light","count":6}'); - 删除用：
el.removeAttribute('data-config');（delete el.dataset.config完全无效） - 混用必踩坑：先
dataset.config = 'a'，再setAttribute('data-config', 'b')，后续dataset.config仍返回'a'—— 缓存没刷新，两者已分裂 - 调试时想看实时值？别信 DevTools 里 dataset 面板，用
el.outerHTML或getAttribute才是真实 DOM 状态
存布尔/数组/嵌套结构时，dataset 的字符串陷阱
dataset 对所有值一视同仁：强制字符串化。这意味着你无法靠属性值本身判断真假、类型或结构。
-
data-is-open="false"→el.dataset.isOpen === 'false'，但Boolean('false') === true，所以不能写if (el.dataset.isOpen) - 正确判断布尔：
el.dataset.isOpen === 'true'或el.getAttribute('data-is-open') === 'true' - 数组如
data-tags='["a","b"]'→ 必须JSON.parse(el.dataset.tags)，不能el.dataset.tags.split(',') - 嵌套对象同理，不 parse 就访问
.user.name必然Cannot read property 'name' of undefined
复杂数据结构一旦开始用 dataset 存，就必须全程自己管序列化、解析、错误兜底——它不帮你做任何事，只负责把字符串原样摆在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
