data-*属性名必须全小写加连字符，否则js读不到；dataset是驼峰映射视图，赋值不更新dom，需setattribute；值恒为字符串，须手动类型转换。
HTML代码质量差，data-属性用不对，数据绑定就容易断链、读不到、类型错——这不是JS写得不好，是HTML层就埋了坑。
data-* 属性名写错，JS 就读不到
浏览器只认严格符合规范的 data- 名：前缀 data- 后必须全小写 + 连字符，不能有大写字母、下划线、点号或数字开头。
-
data-user-id✅ → JS 中读作element.dataset.userId -
data-api-url✅ →element.dataset.apiUrl -
data-2024-start✅ → 必须用element.dataset["2024Start"]（点语法不支持数字开头） -
data_user_id❌、data-userId❌、data-UserID❌ —— 全部无效，DOM 里根本不存在这个属性
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里写了 data-userId="123"——不是“读不到”，是“压根没进 DOM”。
dataset.userId 和 getAttribute("data-user-id") 到底该用哪个
二者行为不同，选错会埋坑：dataset 是 DOM 解析后生成的驼峰映射视图；getAttribute 是原始字符串快照。
- 读取服务端渲染（SSR）或框架初始输出的静态值 → 用
getAttribute("data-user-id")，它不依赖 DOM 解析阶段，更可靠 - 属性名含下划线（如
data-user_id）或大写字母 →dataset完全忽略，只能用getAttribute("data-user_id") - 需要原始字符串（比如带前导空格、换行、JSON 格式未
parse）→getAttribute直接返回，不加工 - 高频读写且确定环境 ≥ IE11 →
dataset.userId可读性好，但注意它不自动更新类型
dataset 赋值不会真正写入 DOM 属性
element.dataset.foo = "bar" 看似能改值，实际只是操作内存中的映射副本；刷新页面后，HTML 源码里的 data-foo 还是旧值。
- 真正要持久化、让
getAttribute或 CSS 选择器看到新值，必须调用：element.setAttribute("data-foo", "bar") -
dataset赋值不触发 DOM 变更事件，监听attr变化的 MutationObserver 捕捉不到 -
data-值恒为字符串，dataset.foo = 123后，getAttribute("data-foo")返回"123"，需手动parseInt或JSON.parse
HTML 整体结构与属性书写不规范，会让 data-* 失效更隐蔽
哪怕 data- 名写对了，如果 HTML 本身结构混乱或属性格式错，JS 读取逻辑就可能意外中断。
-
lang和charset必须显式声明：和<meta charset="UTF-8">（且后者必须是第一个子元素） - 所有属性值必须用双引号：
data-id="123"✅，data-id=123❌（空格或特殊字符时直接解析失败） - 属性顺序建议固定：
class→id→data-*→src/href→alt/title→aria-*，避免 Git diff 干扰真实变更 - 布尔属性如
disabled不带等号：<input disabled>✅，<input disabled>❌（冗余且部分工具报错）
最常被忽略的是：data- 值永远是字符串，而很多人在 JS 里直接当数字或对象用，却不做转换——这比属性名写错更难 debug，因为控制台看起来“一切正常”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
