dataset读取data-属性时自动将连字符转为驼峰：data-user-id→element.dataset.userid，且只处理合法data-前缀属性，非法命名被忽略；写入也须用驼峰，方括号赋值不触发dom同步。
dataset读取带连字符的属性名会自动转成驼峰
HTML里写 data-user-id="123"，JavaScript中用 element.dataset.userId 读，不是 element.dataset.user-id——后者语法错误，根本没法写。浏览器在把 data- 开头的属性注入 dataset 时，会把所有连字符（-）去掉，并把后面字母大写，形成驼峰式键名。
连字符位置不同，驼峰转换规则固定但易错
规则很简单：每个 - 后面的字母都会被首字母大写，且 - 被完全忽略。比如：
-
data-api-key→element.dataset.apiKey -
data-first-name→element.dataset.firstName -
data-x-y-z→element.dataset.xYz -
data--double-dash（不推荐）→element.dataset.doubleDash（两个连字符被当作一个分隔符处理）
注意：dataset 只处理 data- 开头的属性，data-123 或 data-_id 这类非法命名会被忽略，根本不会出现在 dataset 对象里。
写入时也必须用驼峰，否则无效
反向操作也一样：想通过 dataset 设置带连字符的属性，必须用驼峰写法，浏览器会自动转回连字符形式写入 DOM：
element.dataset.userId = "456"; // 等效于设置 data-user-id="456"
但如果写成 element.dataset["user-id"] = "456"，这个赋值虽然不报错，但不会反映到 DOM 上——dataset 的属性访问器只响应驼峰键名，方括号访问对自定义属性无效（它走的是普通对象属性逻辑，不触发 DOM 同步）。
遇到奇怪的空值或 undefined？先检查命名合法性
常见排查点：
- 属性名是否含非法字符（如空格、中文、下划线开头）？只有字母、数字、连字符合法，且连字符不能开头或结尾
- 是否漏写了
data-前缀？user-id不会进dataset，必须是data-user-id - 是否在元素渲染前就访问了
dataset？动态插入的元素要等 DOM 更新后才能读取 - 是否用了大小写混搭但不符合驼峰规则？比如
data-UserID→element.dataset.userid（全小写），因为转换只识别-，不识别大小写边界
最稳妥的方式：始终用 getAttribute("data-xxx") 读原始字符串，绕过驼峰转换；但若要用 dataset，就得严格按它的转换规则来——它不是“智能映射”，只是固定字符串替换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
