data-*属性命名须全小写加连字符，否则dom中不存在；dataset为只读映射，修改需setattribute；值恒为字符串，需手动类型转换；数字开头名须用方括号访问；服务端渲染后优先用getattribute读取。
data-* 属性命名必须全小写加连字符，否则浏览器直接忽略
浏览器解析 HTML 时只识别严格符合规范的 data-* 属性：前缀 data- 后必须全小写，且只能用字母、数字或连字符（-），不能含大写字母、下划线、点号或数字开头（如 data-2024-id 虽合法但访问受限）。常见失效写法包括：data-userId、data_user_id、data-UserID、data-2024id（数字紧接连字符后不推荐，易误读）。
正确示例：data-item-id → JS 中通过 el.dataset.itemId 访问；data-order-number → el.dataset.orderNumber。写错名字不是“读不到”，而是 DOM 树里根本不存在该属性——getAttribute('data-userId') 也会返回 null。
dataset 是只读映射，修改必须用 setAttribute
el.dataset.itemId = "123" 看似生效，实际只是改了内存副本，DOM 节点未更新，getAttribute('data-item-id') 仍返回旧值，CSS 选择器如 [data-item-id="123"] 也无法匹配。
- 真正持久化写入：用
el.setAttribute('data-item-id', '123') - 删除属性：用
el.removeAttribute('data-item-id')，而非delete el.dataset.itemId - 混用会出问题：先
dataset.itemId = "a"，再setAttribute('data-item-id', 'b')，后续dataset.itemId仍返回"a"（缓存未刷新），而getAttribute返回"b"
所有 data-* 值都是字符串，类型转换必须手动做
哪怕 HTML 里写的是 data-item-id="42" 或 data-is-active="false"，JS 中拿到的仍是字符串 "42" 和 "false"。直接参与运算或判断极易出错：
-
el.dataset.itemId + 1得到"421"（字符串拼接），应写成+el.dataset.itemId + 1或Number(el.dataset.itemId) + 1 -
if (el.dataset.isAvailable)在data-is-available="false"时仍为true（非空字符串转布尔恒真），正确写法是el.dataset.isAvailable === "true" - 存 JSON 时，必须用
setAttribute('data-config', JSON.stringify(obj))；取时用JSON.parse(el.getAttribute('data-config') || '{}')，不能依赖dataset.config（驼峰转换可能错位键名，如user-preferences→userPreferences）
数字开头的 data 属性名需用方括号访问
像 data-2024-id 这类合法但含数字开头的属性，无法用点号语法访问：el.dataset.2024Id 是语法错误。必须使用方括号：
-
el.dataset["2024Id"]✅ -
el.getAttribute('data-2024-id')✅（更稳妥，不依赖驼峰规则） -
el.dataset.2024id❌（JS 解析失败）
服务端渲染后首次 JS 执行前，dataset 可能为空；若依赖初始值，建议优先用 getAttribute 读取，或确保 JS 在 DOM ready 后执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
