data-*属性仅适合存储公开、简单、渲染所需的辅助信息，不可存敏感数据或复杂状态；读取时dataset自动驼峰转换但只返回字符串，需手动json.parse并try/catch，而getattribute返回原始字符串且兼容非法命名；事件委托中须用closest向上查找目标元素。
data-* 属性不是用来存敏感数据或复杂状态的，它只适合挂载“页面渲染所需、可公开、结构简单”的辅助信息。 它不能加密、不防篡改、值永远是字符串——你得自己 JSON.parse，还得包 try/catch。
怎么读取 data-* 值：dataset 和 getAttribute 有啥区别？
用 element.dataset 最方便，但注意命名转换规则：HTML 中写 data-user-id，JS 里读就是 element.dataset.userId；data-reg-time → element.dataset.regTime。而 getAttribute('data-user-id') 返回原始字符串，不转驼峰，也不过滤非法命名。
以下情况必须用 getAttribute：
-
data-名含大写字母（如data-UserID）——dataset会忽略或全转小写 - 需要读原始值（比如带前导空格或换行的字符串）
- 属性名含下划线（
data_user_id）——dataset不识别
事件委托时为什么拿不到 data-*？
点击按钮里的图标，event.target 是那个 <svg></svg>，它没挂 data-action，你直接读 event.target.dataset.action 就是 undefined。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法是向上找最近的带该属性的祖先：
- 用
event.target.closest('[data-action]')获取目标容器 - 再读它的
.dataset.action或.getAttribute('data-action') - 如果高频触发（比如拖拽、滚动中），别在回调里反复调
closest，提前缓存或把事件绑定到父级容器上
哪些场景适合用 data-*？哪些绝对不该用？
适合的典型场景：
- 列表项携带 ID：
<li data-item-id="123">标题</li>，点击后跳转或拉详情 - 按钮标注行为类型：
<button data-action="delete" data-confirm="确定删除？">删</button> - 服务端预渲染的初始配置：
<div id="app" data-config='{"theme":"dark"}'></div>
绝对不该用的：
- 用户 token、session key 等敏感字段（明文暴露在 HTML 源码里）
- 大型对象或数组（应存在
Map或模块级变量中） - 需要响应式更新的状态（DOM 属性不会触发 Vue/React 的 reactivity）
- 作为唯一的数据源来驱动组件逻辑（容易和 JS 状态不同步）
真正容易被忽略的是：哪怕你写了 data-user-info='{"id":1,"name":"张三"}'，dataset.userInfo 拿到的仍是字符串，不是对象——没人自动帮你 JSON.parse，出错也不会报在控制台，只会静默变成 undefined。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
