<p>data-* 属性是仅用于存储字符串的 DOM 标签挂载机制，无自动绑定与响应式；命名须全小写加短横线（如 data-user-id），连字符转驼峰（data-api-key → dataset.apiKey），空值需等号，敏感数据/大型对象/状态源禁用。</p>
data-* 属性不是数据关联机制，它只是把字符串“挂”在 DOM 元素上，JS 必须手动读取、转换、使用——没有自动绑定，也没有响应式更新。
data-* 属性怎么写才不会被 dataset 忽略
浏览器解析 HTML 时会对 data-* 属性名做标准化处理，写错就直接进黑洞，JS 里读不到。
- 必须全小写 + 短横线分隔：
data-user-id✅，data-userId❌（dataset.userId是undefined） - 不能含下划线、冒号以外的符号：
data_user_id不会被dataset映射，只能用getAttribute('data_user_id') - 连字符自动转驼峰：
data-api-key→dataset.apiKey，不是dataset.api-key（语法错误） - 空值无效：
data-status=""解析后属性存在但值为空字符串；data-status（无等号）根本不会出现在 DOM 中
dataset 和 getAttribute 什么时候该用谁
二者都返回字符串，但行为差异会导致静默失败——尤其在 SSR、模板渲染或命名不规范时。
- 用
dataset：命名规范（全小写+短横线），且只需点语法快速读取，比如el.dataset.itemId - 用
getAttribute('data-xxx')：需要原始字符串（带空格、前导零、换行）、命名含大写字母/下划线、或服务端模板生成不可控时 -
data-config='{"theme":"dark"}'→dataset.config返回字符串，不是对象；没人帮你JSON.parse，也不会报错 - 首次设置新属性必须用
setAttribute('data-xxx', 'val')；dataset.xxx = 'val'对未声明的属性无效，DOM 上看不到
事件委托中为什么拿不到 data-* 值
点击按钮里的图标或文字，event.target 很可能是子元素，它没挂 data 属性——不是 JS 有问题，是找错了节点。
立即学习“前端免费学习笔记（深入）”；
- 别写
event.target.dataset.action，改用event.target.closest('[data-action]')向上找最近匹配的祖先 - 如果容器结构固定（如整个
<li>都可点），直接把事件监听器绑在父级，避免每次触发都查 DOM - 高频操作（如拖拽中反复获取）务必提前缓存目标元素，不要在回调里重复调用
closest -
closest查不到时返回null，记得判空，否则.dataset.xxx会报错
哪些场景适合用 data-*，哪些绝对不该碰
它只是一个轻量、公开、一次性的字符串容器。用错地方，后期维护成本翻倍。
- 适合：
<button data-action="delete" data-item-id="105">（行为标识+简单 ID）；服务端预置配置：<div id="app" data-config='{"theme":"dark"}'> - 不适合：存
token或用户敏感信息（明文暴露在 HTML 源码里）；存大型对象或数组（应放 Map 或模块变量）；当唯一状态源驱动组件逻辑（JS 状态和 DOM 属性极易不同步） - 最易忽略的一点：
dataset是只读映射，el.dataset.loading = "false"不会更新 DOM 属性，CSS 选择器[data-loading="false"]也不会匹配——得用setAttribute
