data-*属性必须全小写加连字符命名，如data-user-id；读取用dataset.useridd，写入须用setattribute；存取需处理字符串转换、json解析及安全限制。
data-* 属性不是“随便加个属性就行”，命名错就完全读不到
浏览器只认全小写 + 连字符的命名格式。写成 data-userId、data_user_id 或 data-UserID，DOM 解析时直接忽略，DevTools 里都看不到，dataset.userId 必然返回 undefined。
正确写法必须是：
-
data-user-id→ JS 中用el.dataset.userId -
data-api-url→ JS 中用el.dataset.apiUrl -
data-2024-report→ 必须用el.dataset["2024Report"]（点号无法访问数字开头）
大小写混用或下划线，等于没写——不是读不到，是压根没进 DOM 树。
dataset 读写和 setAttribute/getAttribute 混用会立刻导致值不一致
dataset.foo = "a" 只改内存副本；setAttribute("data-foo", "b") 才真正更新 DOM。下次读 dataset.foo 还是 "a"，而 getAttribute("data-foo") 返回 "b" —— 缓存未刷新，状态错乱。
实操建议：
- 读取优先用
el.dataset.xxx（语义清晰、自动驼峰转换） - 写入必须用
el.setAttribute("data-xxx", "value")（否则无法持久化） - 判断是否存在：先用
"xxx" in el.dataset，再取值，避免undefined引发错误 - 删除属性：用
delete el.dataset.xxx，比removeAttribute("data-xxx")更安全
存 JSON 或布尔值时，字符串类型转换最容易踩坑
dataset 暴露出来的永远是字符串。存 data-is-pending="false"，读出来是字符串 "false"，不是布尔值 false；存 data-config='{"theme":"dark"}'，读出来是字符串，不是对象。
正确处理方式：
- 布尔判断别写
Boolean(el.dataset.isPending)→ 改用el.dataset.isPending === "true" - 数字转换用
+el.dataset.count或Number(el.dataset.count)，别直接比较=== 0 - JSON 数据必须手动
JSON.parse(el.dataset.config || "{}")，且加try/catch防止服务端未转义导致语法错误
敏感字段如 data-token、data-phone 绝对禁止 —— 页面源码里明文可见。
React/Vue 中用 data-* 传列表项数据，别再往原生标签塞自定义属性
在 React 的 map 渲染中，直接给 <li> 加 airport={...}、lat={...} 是无效的：浏览器不识别，event.target.lat 一定 undefined。
正确做法是：
- 把数据挂到
data-属性上：<li data-airport-id="{airport.iata}" data-lat="{airport.latitude}" ...> - 事件处理器里统一从
event.target.dataset读：const id = event.target.dataset.airportId - 复杂对象需序列化：
data-config={JSON.stringify(airport)}，再在 handler 里JSON.parse(event.target.dataset.config)
注意 SSR 场景：首次 JS 执行前 dataset 是空的，安全读值应 fallback 到 getAttribute；Vue/React 默认不透传 data- 到根元素，需显式处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
