data-* 属性仅提供上下文，行为由 javascript 控制；dataset 自动转驼峰、值恒为字符串；适合事件委托但不可替代状态管理或存储敏感信息。
data-* 属性本身不控制行为，它只提供上下文；真正控制页面行为的是 JavaScript 读取这些属性后执行的逻辑。 直接把 data-action="submit" 写进按钮里，页面不会自动提交表单——你必须写 JS 去监听、解析、响应。
用 dataset 读取 data-* 值时命名自动转驼峰
HTML 中的连字符命名会被浏览器自动映射为驼峰式键名，这是 dataset API 的核心规则，不是约定而是强制行为。
-
data-user-id→element.dataset.userId -
data-api-endpoint→element.dataset.apiEndpoint -
data-is-pending→element.dataset.isPending -
data-1st-item合法，但无法用点号访问：element.dataset["1stItem"]才行 - 含大写字母如
data-userId会被转成全小写：element.dataset.userid（不是userId）
所有值都是字符串，data-in-stock="false" 读出来是 "false"，不是布尔值，需手动转换：JSON.parse(element.dataset.inStock) 或 element.dataset.inStock === "true"。
用 data-* 驱动事件委托，避免重复绑定
适合按钮、卡片、列表项等有统一交互意图的场景。靠 closest() 捕获子元素点击，再从 dataset 提取动作类型和参数。
- HTML 示例：
<button data-action="delete" data-item-id="42">删</button> - JS 统一监听：
document.addEventListener('click', e => { const btn = e.target.closest('[data-action]'); if (!btn) return; const action = btn.dataset.action; const id = btn.dataset.itemId; }) - 不用给每个按钮单独
addEventListener，DOM 动态增删也不影响逻辑 - 注意：直接用
e.target.dataset.action在图标或 span 子元素上会返回undefined，必须用closest()
修改 data-* 值要用 dataset，但首次设置得用 setAttribute
dataset 是读写已有 data-* 属性的推荐方式，但它对“新增属性”无效——这是高频踩坑点。
- 已有
data-status：可直接el.dataset.status = "loading" - 想新增
data-retry-count：必须用el.setAttribute('data-retry-count', '3') -
el.dataset.retryCount = "3"不会生成任何 DOM 属性，getAttribute('data-retry-count')返回null - 删除属性优先用
delete el.dataset.status，比removeAttribute('data-status')更安全（避免拼错属性名）
频繁在循环中读写 dataset 可能引发重排，建议先缓存值，批量更新。
data-* 不该承担的状态和风险
它不是状态管理工具，也不是数据存储层。滥用会导致 DOM 膨胀、调试困难、安全泄漏。
- ❌ 别存动态变化的计数器：
data-cart-count="5"→ 应由 JS 状态驱动 UI 渲染，DOM 只呈现结果 - ❌ 别存敏感信息：
data-user-token、data-permissions→ 开发者工具一眼可见，极易被爬取 - ❌ 别替代 class 控制样式：
data-active="true"用于逻辑判断可以，但 CSS 应该用.is-active类，而非[data-active="true"]（性能差、语义弱） - ⚠️ XSS 风险：若 data 值来自用户输入且未过滤，又直接插入 innerHTML，就会触发漏洞
最常被忽略的一点：data-* 是静态容器，它的价值不在“有没有”，而在“JS 是否有一致、轻量、可预测的方式去取用它”。一旦开始用 getAttribute + 正则解析 class 名来代替 dataset，你就已经绕开了它的设计初衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
