data-*属性必须全小写加连字符命名，读写应优先用getAttribute/setAttribute而非dataset，存对象需手动JSON序列化，dataset存在驼峰转换、类型幻觉及DOM不同步等陷阱。
直接用 data-* 存动态内容没问题，但必须绕开 dataset 的驼峰陷阱和类型幻觉——它不认大小写、数字开头、下划线，且所有值都是字符串。真要存对象、布尔或数字，得自己序列化+解析，别指望自动转换。
data-* 属性名怎么写才不会丢数据
浏览器只认全小写 + 连字符的 data-* 名，其他一律静默忽略。写错不是报错，是根本读不到。
-
data-user-id✅ 合法，dataset.userId可读 -
data-api-key✅ 合法，dataset.apiKey可读 -
data-1st-load❌ 非法（数字开头），只能用getAttribute("data-1st-load") -
data_user_id❌ 下划线不识别，dataset.userId返回undefined -
data-userId❌ 大写字母不识别，即使 HTML 里写了也进不了dataset
存 JSON 或对象时必须手动序列化
dataset 不支持嵌套结构，也不做自动 JSON 解析。你往 data-config 里塞对象，它只会转成 [object Object] 字符串，再读出来就废了。
- 正确写法：
el.setAttribute("data-config", JSON.stringify({ theme: "dark", lang: "zh" })) - 安全读法：
const raw = el.getAttribute("data-config"); const config = raw ? JSON.parse(raw) : {}; - 别用：
el.dataset.config = { theme: "dark" }→ 实际存的是"[object Object]" - 别信：
JSON.parse(el.dataset.config)→ 键名可能被驼峰转换错（比如data-api-endpoint→dataset.apiEndpoint），取不到原始 key
dataset 赋值 ≠ DOM 更新，该用 setAttribute 就别偷懒
el.dataset.foo = "bar" 看似成功，其实只是改了代理对象，DOM 属性没变。刷新页面、重渲染、或被其他脚本读 getAttribute("data-foo")，都会拿到旧值。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 要持久生效：必须用
el.setAttribute("data-foo", "bar") - 要删属性：用
el.removeAttribute("data-foo")，别delete el.dataset.foo（无效） - CSS 选择器如
[data-loading]不会响应dataset.loading = "true"，必须setAttribute才触发匹配 - MutationObserver 也监听不到
dataset赋值，只响应真实 DOM 属性变更
读取优先选 getAttribute，而不是 dataset
除非你 100% 控制 HTML 输出且命名严格合规，否则 getAttribute 是唯一稳的读法。它不转驼峰、不隐式类型转换、不静默失败。
- 判断是否存在：
el.hasAttribute("data-disabled")比el.dataset.disabled !== undefined准 - 读原始字符串：
el.getAttribute("data-status")返回你写的原样，"0"就是"0"，""就是空字符串 - 读含数字/大小写的属性：
getAttribute("data-2024-year")有效，dataset["2024Year"]是兜底写法，但不如直接getAttribute - 服务端渲染输出的
data-initial-state='{"count":10}'，必须getAttribute + JSON.parse，且加try/catch
最常被忽略的一点：dataset 是只读映射，不是数据绑定层。它方便，但不可靠；getAttribute 罗嗦，但保命。动态内容越复杂，越要放弃“图省事”的 dataset.xxx = yyy 写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
