<p>data-* 属性命名必须全小写加连字符，如 data-user-id 对应 el.dataset.userId；数字开头需用方括号访问；读写应统一用 dataset 或 setAttribute，避免混用；值均为字符串，需手动转布尔、数字或 JSON；SSR 时优先用 getAttribute；禁止存放敏感信息。</p>
data-* 属性命名必须全小写加连字符
浏览器解析时会把 data-userId、data_user_id 这类写法直接忽略，DevTools 里都看不到，dataset.userId 必然返回 undefined。真正有效的只有 data-user-id → JS 中对应 el.dataset.userId，data-api-url → el.dataset.apiUrl。
数字开头的要特别注意：data-2024-report 合法，但不能用点号访问，得写成 el.dataset["2024Report"]。
常见错误现象：
- HTML 里写了
data-status="pending"，JS 却读el.dataset.Status或el.dataset.status（后者实际对应data-status，但驼峰转换后是status，没错；错在大小写混用） - 用了下划线或大写字母，属性根本没进 DOM，
in el.dataset判断永远为 false
dataset 读写和 setAttribute 不能混用
dataset 是内存副本，setAttribute 才真正改 DOM。混用会导致状态不一致：
立即学习“前端免费学习笔记（深入）”；
-
el.dataset.foo = "a"→ 内存值变，DOM 里data-foo还是旧值 -
el.setAttribute("data-foo", "b")→ DOM 值变，但下次读el.dataset.foo还是 "a"
所以：读一律用 el.dataset.xxx；写一律用 el.setAttribute("data-xxx", value)；判断是否存在先用 "xxx" in el.dataset，避免取 undefined 出错。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
布尔/数字/JSON 类型必须手动转换
dataset 暴露的永远是字符串。存 data-is-pending="false"，读出来是字符串 "false"，不是布尔 false；存 data-count="0"，也不能直接 === 0。
正确做法：
- 布尔判断：用
el.dataset.isPending === "true"，别用Boolean(el.dataset.isPending) - 数字转换：用
+el.dataset.count或Number(el.dataset.count) - JSON 数据：必须
JSON.parse(el.dataset.config || "{}")，且加try/catch防止服务端未转义导致语法错误
SSR 或框架中 data-* 属性容易“消失”
服务端渲染页面首次加载时，dataset 是空的——因为 JS 还没执行，DOM 虽已存在，但 dataset 初始化延迟。Vue/React 默认也不透传 data-* 到根元素，需显式配置或用 getAttribute 回退。
安全读值方式：
- SSR 场景优先用
el.getAttribute("data-xxx")，它在 HTML 解析后立即可用 - 框架内若需保留，Vue 要用
v-bind显式绑定，React 要确保 props 透传到真实 DOM 元素 - 敏感字段如
data-token绝对禁止——源码里明文可见，毫无安全性可言
最常被忽略的是类型转换和 SSR 时机：一个 "false" 字符串在条件分支里直接当真值用，或者在 mounted 之前就去读 dataset，结果都是 undefined。
