根本原因是浏览器只认全小写加连字符的data-*属性名，如data-user-id；写成data-userid、data-user-id或data_user_id会在dom解析阶段被直接忽略，dataset中根本不存在对应字段。
data-*属性名为什么写对了还是读不到
根本原因：浏览器只认全小写 + 连字符的命名。写成data-userId、data-User-ID或data_user_id，DOM 解析阶段就直接忽略，dataset里压根不会出现对应字段——不是读不到，是根本没进去。
必须严格满足：data-后只能跟小写字母、数字、连字符（-），且至少一个字符；不能有大写、下划线、点号、空格。
-
data-user-id✅ 可读为el.dataset.userId -
data-api-url✅ →el.dataset.apiUrl（不是apiUrl也不是apiurl） -
data-2024-year✅ → 必须用方括号访问：el.dataset["2024Year"] -
data-last-modified-at✅ →el.dataset.lastModifiedAt（每段连字符后首字母都大写）
dataset读取和setAttribute写入为什么不能混用
dataset 是 DOM 属性的只读代理，不是双向绑定。混用会导致状态不一致：JS 看到的值和 HTML 实际属性值脱节。
- 读取优先用
el.dataset.xxx（自动转驼峰、语义清晰） - 写入必须用
el.setAttribute('data-xxx', 'value')（否则修改不落地） - 错误示范：
el.dataset.userId = "1002"后再el.setAttribute('data-user-id', "1003")，el.dataset.userId仍返回"1002" - 服务端渲染或 SSR 框架（如 Next.js）中，仅靠
dataset赋值可能完全不生效，因为初始 HTML 里没写入真实属性
存对象或布尔值时为什么总出错
dataset 的值永远是字符串。直接赋对象、数字、布尔值，会触发隐式 toString()，导致数据丢失或解析失败。
-
el.dataset.config = { theme: "dark" }→ 实际存成"[object Object]" -
el.dataset.count = 42→ 存的是字符串"42"，el.dataset.count + 1得到"421" - 正确做法：
el.setAttribute('data-config', JSON.stringify({ theme: "dark", timeout: 3000 })) - 读取时必须判空再解析：
const config = el.getAttribute('data-config') ? JSON.parse(el.getAttribute('data-config')) : {} - 敏感信息（token、手机号、用户 ID）绝不能放
data-*—— 所有内容明文暴露在 HTML 源码里
IE11 和 SSR 场景下哪些坑最容易被忽略
IE11 对连字符转驼峰有兼容性问题（比如 data-user-id 的 dataset.userId 可能返回 undefined）；SSR 中若未做 HTML 实体编码，JSON 字符串里的引号或尖括号会破坏 HTML 结构。
- 兼容 IE11 时，统一用
el.getAttribute('data-user-id')替代dataset读取 - 服务端输出 JSON 到
data-config前，必须 HTML 实体编码："替换"，否则JSON.parse(el.getAttribute('data-config'))报SyntaxError - 连续连字符（如
data-foo--bar）虽能被转成fooBar，但语义模糊，部分构建工具或 Linter 会警告，不推荐 -
data-*不是状态管理替代品：它不响应式、不跨组件、不参与 diff，复杂状态请交给 React state / Vue reactive 或全局 store
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
