data-*属性必须全小写加连字符，如data-user-id；js通过el.dataset.userid访问，数字开头需用方括号；值均为字符串，需手动转换；写入须用setattribute，不可直接赋值dataset；敏感信息禁止存放，大段数据应避免。
data-* 属性必须全小写加连字符，否则 dataset 读不到
你在 <tr> 或 <code><td> 上写的 <code>data-userId、data_user_id、data-user id 全部无效。浏览器解析时会忽略或转成不一致的名称，导致 el.dataset.userId 返回 undefined。
正确写法只有一种：data-user-id、data-order-status、data-item-sku。JS 中对应访问方式是 el.dataset.userId、el.dataset.orderStatus、el.dataset.itemSku。
- 含数字开头（如
data-2024-batch）→ 必须用方括号：el.dataset["2024Batch"] - 多个连字符（如
data-first-name）→ 自动转为el.dataset.firstName，不是el.dataset.firstname - 验证是否生效：别只查
dataset，用el.hasAttribute('data-user-id') && el.getAttribute('data-user-id')双检更可靠
dataset 读出来全是字符串，数值/布尔值要手动转换
data-price="99.99" → el.dataset.price 是字符串 "99.99"，直接参与计算会出错；data-active="false" → el.dataset.active === "false"，但 Boolean("false") 是 true。
- 数字：用
+el.dataset.price或Number(el.dataset.price) - 布尔：用
el.dataset.active === "true"或JSON.parse(el.dataset.active)（前提是值严格为"true"/"false"） - 对象/数组：存之前
JSON.stringify({mode: 'dev', retry: 3})，读取时JSON.parse(el.dataset.config)；注意服务端输出前必须 HTML 实体编码，否则引号会导致解析失败
写入 data-* 必须用 setAttribute，dataset.xxx = ... 不持久
el.dataset.selected = "true" 看似能改，但它只是操作内存副本；刷新页面后，原始 HTML 里的 data-selected 值没变，且其他 JS 逻辑（比如监听 attributeChangedCallback）完全感知不到。
- 正确写法：
el.setAttribute('data-selected', 'true') - 删除属性：
el.removeAttribute('data-selected')或更安全的delete el.dataset.selected（兼容 IE11+） - 混用危险：
el.dataset.selected = "a"后再el.setAttribute('data-selected', 'b')，此时el.dataset.selected仍返回"a"（缓存未刷新）
表格里大量行挂 data-*，性能和安全边界在哪
每行都带 data- 没问题，但别塞大段数据——比如把整个订单明细 JSON 直接塞进 data-orders，会拖慢 DOM 解析、增大内存占用、还可能触发 XSS 风险（若服务端未做 HTML 实体编码）。
- 单个
data-值建议控制在几 KB 内；超长结构优先用 JSMap或变量缓存，DOM 只存 ID 或 key - 所有
data-值都明文可见，右键“查看网页源代码”就能看到——绝不能放token、user-email、权限列表等敏感信息 - 频繁读写（比如循环中反复取
dataset.rowIndex）会触发重排，应先读到局部变量再批量处理
真正容易被忽略的是：dataset 的命名映射和写入机制是分离的。你写错一次 HTML 名字，JS 就永远读不到；你用错一次赋值方式，DOM 就永远不同步。它看起来简单，但每个环节都卡在规范细节上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
