data-* 属性是单向字符串通道，dataset为其js接口，但存在命名转换、类型限制和事件目标错位三类静默失败；合规命名须以data-开头，后接小写字母、数字、短横线或下划线且不以数字开头；event.target常非目标元素，应改用closest或委托父级监听；dataset自动trim且不解析json，复杂值或非标准命名需用getattribute；其修改不触发响应式更新，不可替代状态管理。
data-* 属性不是“绑定”，只是单向字符串通道；dataset 是它的 JS 接口，但命名转换、类型限制和事件目标错位这三处最容易导致静默失败。
data-* 属性名怎么写才不会被 dataset 忽略
浏览器只认一种合法格式：必须以 data- 开头，后面只能跟小写字母、数字、短横线 - 或下划线 _，且不能以数字开头。命名不合规，dataset 就读不到——不是报错，是直接返回 undefined。
-
data-user-id✅ →element.dataset.userId -
data-userId❌ → 大写字母会被忽略或转为全小写，dataset.userId为undefined -
data_user_id✅ → 但必须用element.dataset["user_id"]，dataset.userId无效 -
data-api-url✅ → 对应dataset.apiUrl，不是dataset.api-url（语法错误） -
data-123❌ → 以数字开头，属性根本不会被解析进 DOM
event.target.dataset.xxx 为什么经常是 undefined
因为 event.target 很少是你想操作的那个元素。按钮里嵌了 <span></span> 或图标，点击时 target 是子节点，它没挂 data-action ——不是 JS 有问题，是找错了对象。
- 别写
event.target.dataset.action，改用event.target.closest('[data-action]') - 如果父容器结构稳定（比如整个
<div class="card"> 都可点），把事件监听器直接绑在父级，避免每次触发都调 <code>closest() - 高频场景（如拖拽中实时读取
data-snap-grid）必须提前缓存目标元素，不要在回调里反复查 DOM - 要驼峰读取、且 HTML 中命名规范（全小写+短横线）→ 优先用
dataset，写法简洁：el.dataset.userId - 需要原始值（含前导空格、换行、前导零）→ 必须用
getAttribute('data-xxx')，dataset会自动trim - 服务端模板生成的属性含大写字母（如
data-UserID）或下划线（data_user_id）→ 绕过dataset，直用getAttribute -
data-config='{"theme":"dark"}'→dataset.config拿到的是字符串，不是对象；没人帮你JSON.parse，得自己包try/catch - 适合存：渲染所需、公开、简单、一次性的辅助信息，比如
data-item-id、data-modal-target - 不适合存：用户 token、复杂对象、需要响应式变更的状态（应存在 JS 变量或状态管理中）
- SSR 场景下，首次 JS 执行前
dataset不可用，必须用getAttribute('data-xxx')安全取值 - IE11 及更早版本不支持
datasetAPI，兼容性要求高时，统一用getAttribute
dataset 和 getAttribute('data-xxx') 到底该用哪个
二者都返回字符串，但行为差异明显，选错会导致逻辑断裂：
data-* 不是状态管理，改了 dataset 不会触发响应式更新
你执行 el.dataset.active = 'true'，HTML 属性确实更新了，但 Vue 的 ref、React 的 useState、甚至一个全局 Map 缓存里的对应值，全都不会同步。它只管存，不管联动。
