dataset用于读写data-*属性，自动转连字符为驼峰命名（如data-user-id→userid），但值恒为字符串需手动转换，适用于轻量静态ui数据，不适用于敏感信息或高频更新场景。
dataset 读取的是 data-* 属性，但属性名会自动转换为驼峰式
HTML 中的 data- 自定义属性，通过 dataset 访问时，浏览器会自动把连字符（-）去掉，并将后一个字母大写。比如 data-user-id → element.dataset.userId，data-api-url → element.dataset.apiUrl。
注意：全数字开头或含非法字符的属性名会被忽略；带前导数字的如 data-123id 无法通过 dataset 访问，只能用 getAttribute('data-123id')。
-
data-modal-type="confirm"→el.dataset.modalType === "confirm" -
data-is-active="true"→el.dataset.isActive返回字符串"true"，不是布尔值 -
data-count="42"→el.dataset.count是字符串"42"，需手动parseInt()或Number()
dataset 修改属性时，会同步更新 DOM 上的 data-* 属性
给 dataset 赋值，等价于调用 setAttribute。例如 el.dataset.foo = "bar" 会让元素自动拥有 data-foo="bar" 属性。
但反向不成立：直接用 setAttribute('data-foo', 'baz') 更新后，dataset.foo 会立刻反映新值——两者是双向同步的，底层共享同一组属性。
- 赋值 null/undefined 会被转成字符串
"null"或"undefined"，不是删除属性 - 要删除自定义属性，必须用
delete el.dataset.foo（对应removeAttribute('data-foo')） -
dataset不支持点号、空格、特殊符号命名的属性，如data-user.email会被忽略
dataset 在 SVG 元素中不可靠，建议统一用 getAttribute
部分浏览器（尤其是旧版 Safari 和某些 Android WebView）对 SVG 元素的 dataset 支持不完整，dataset 可能为空对象，即使 DOM 上明确写了 data-id="123"。
遇到 SVG 或需要兼容性保障的场景，优先使用 getAttribute('data-id') 和 setAttribute('data-id', '456')，它们在所有元素类型上行为一致。
- SVG 中
<circle data-radius="20"></circle>→circle.getAttribute('data-radius')安全，circle.dataset.radius可能返回undefined - 服务端渲染（SSR）或动态插入的 HTML，若未触发 DOM 解析完成，
dataset可能尚未初始化，此时getAttribute更稳
dataset 的值永远是字符串，类型转换得自己来
dataset 不做任何类型推断。哪怕你写 data-loaded="true"、data-score="98.5"、data-tags='["a","b"]'，拿到的全是字符串。
别指望它自动转布尔、数字或 JSON；解析失败也不会报错，只会得到原始字符串。这是最容易漏掉的隐性坑。
-
el.dataset.loaded === "true"→ 要判断布尔，得写el.dataset.loaded === "true"或JSON.parse(el.dataset.loaded)（需确保格式合法） -
el.dataset.score是"98.5"→ 需parseFloat(el.dataset.score)，否则参与计算会隐式转为NaN - 存数组/对象推荐 JSON 字符串化：
el.setAttribute('data-config', JSON.stringify({timeout: 3000}))，读取时再JSON.parse(el.dataset.config)
dataset 看似简单，但连字符转换规则、类型丢失、SVG 兼容性和删除方式这些细节，线上出问题时往往卡半天。动手前先看一眼控制台里 el.dataset 的实际结构，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
