data-*属性提升交互效率的关键是存储上下文明确、免查询、不依赖dom深度的信息；命名须全小写短横线分隔，读取需注意驼峰转换、类型强制转换及与getattribute的区别，且不可替代状态管理。
用 data-* 属性提升交互效率，关键不是“多存数据”，而是让 JS 能在事件触发瞬间拿到**上下文明确、无需额外查询、不依赖 DOM 结构深度**的信息。它省掉的不是几行代码，而是每次点击都要走一遍 querySelector 或接口请求的延迟和不确定性。
data-* 怎么写才不会被 dataset 忽略
HTML 中的 data- 名必须全小写、用短横线分隔，否则 dataset 读不到或转错：
-
data-user-id→ 可读为element.dataset.userId -
data-userId或data-UserID→dataset.userId是undefined（浏览器行为不一致） -
data_user_id→dataset完全不识别，必须用getAttribute('data_user_id') -
data-reg-time→ 对应dataset.regTime，不是dataset.reg-time（语法错误）
event.target.dataset.xxx 为什么经常是 undefined
点按钮里的图标、文字或 span，event.target 很可能是子元素，它没挂 data-action——不是 JS 读错了，是找错对象了：
- 别写
event.target.dataset.action，改用event.target.closest('[data-action]') - 如果父容器固定（比如整个卡片都可点），把事件监听器直接绑在父级，避免每次触发都
closest - 高频操作（如拖拽中反复获取）务必提前缓存目标元素，别在回调里重复查 DOM
dataset 和 getAttribute('data-xxx') 到底该用哪个
二者返回值类型相同（都是字符串），但行为差异明显，选错会导致静默失败：
- 要用驼峰读取、且属性名规范（全小写+短横线）→ 优先用
dataset，写法简洁 - 需要原始字符串（含空格、换行、前导零）→ 必须用
getAttribute('data-xxx')，dataset会自动trim - 属性名含大写字母、下划线、或服务端模板生成时不可控 → 绕过
dataset，直用getAttribute -
data-config='{"theme":"dark"}'→dataset.config拿到的是字符串，不是对象；没人帮你JSON.parse，出错也不会报错
data-* 不是状态管理，改了它 JS 其他地方不会同步
data-* 是“只读通道”，不是响应式数据源：
- 你改了
dataset.foo = 'bar'，DOM 属性确实更新了，但 Vue/React 的响应式数据、Map 缓存、甚至其他变量引用的值，全都不会联动 - 适合存静态元信息：埋点 ID、SKU、预渲染后供 JS 补充交互的初始参数
- 不适合存动态状态：
data-cart-count随时变化 → 应该用 JS 状态管理，DOM 只负责呈现结果 - 频繁读写
dataset会触发 DOM 重排/重绘（尤其在循环中），不如先缓存到变量再批量更新
最常被忽略的一点：data-* 值永远是字符串，data-count="0" 取出来是 "0"，不是数字 0；data-is-pending="true" 是字符串 "true"，不是布尔值——类型转换得自己做，别指望浏览器替你判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
