dataset 是操作 html data- 属性最直接安全的方式，因 data- 属性不映射为元素自有属性，无法用 el.data-xxx 或 el["data-xxx"] 访问，而由 dataset 统一管理并自动驼峰转换。
dataset 是操作 HTML 全局属性（data-*）最直接、最安全的方式，不用手动 getAttribute/setAttribute。
为什么不能直接用 element.data-xxx 访问？
HTML 中的 data- 属性在 DOM 中不会变成元素的 JS 属性，比如 <div data-user-id="123"></div>，你写 el.data-user-id 会报语法错误（连不上点号），写 el["data-user-id"] 也拿不到值——它根本不在元素对象的自有属性里。
浏览器把所有 data-* 映射到 element.dataset 这个只读对象上，且自动做驼峰转换：
-
data-user-id→el.dataset.userId -
data-api-key→el.dataset.apiKey -
data-abc-def-ghi→el.dataset.abcDefGhi
dataset 的读写行为和边界
读取时，dataset 值永远是字符串；写入时，任何非字符串值都会被强制转成字符串（null → "null"，undefined → "undefined"）。
以下操作等价但推荐用 dataset：
- 读：
el.dataset.userId✅ 比el.getAttribute('data-user-id')更简洁 - 写：
el.dataset.userId = '456'✅ 自动同步到 DOM 属性，无需setAttribute - 删：
delete el.dataset.userId✅ 删除后 DOM 上的data-user-id属性也消失
注意：dataset 不响应动态添加的属性（比如用 setAttribute 新增一个 data-x），必须刷新或重新获取元素才能看到新字段。
遇到空值、布尔值、JSON 怎么办？
dataset 只存字符串，所以别指望它自动解析：
-
data-active="true"→el.dataset.active === "true"（不是布尔true） -
data-config='{"theme":"dark"}'→el.dataset.config是字符串，需JSON.parse(el.dataset.config) -
data-count=""→el.dataset.count === ""，不是undefined或null
建议封装一个工具函数处理常见类型，比如：
function getData(el, key) {
const val = el.dataset[key];
if (val === 'true') return true;
if (val === 'false') return false;
if (/^\d+$/.test(val)) return Number(val);
try { return JSON.parse(val); } catch { return val; }
}
兼容性与性能提醒
dataset 在 IE11+ 和所有现代浏览器中都可用；IE10 及更早版本不支持，必须降级用 getAttribute。
性能上毫无压力——它只是属性映射，没有重排重绘。但要注意：频繁读写 dataset 不会触发样式计算或布局，这点比操作 className 或 style 安全得多。
真正容易被忽略的是：dataset 只反映初始 HTML 中声明的 data- 属性，JS 动态设置后若再用服务器端渲染（SSR）或框架 diff，可能因服务端未同步而产生不一致。上线前务必检查 SSR 输出是否包含对应 data- 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
