getattribute()是最稳的读取方式，直接读取原始html字符串，兼容所有合法data-*命名（含数字开头、下划线、大小写混用），而dataset受驼峰转换限制且无法处理ssr初始值或非法命名。
getAttribute() 是最稳的读取方式
dataset 在遇到 data-1st-load、data-apiKey、data_user_id 这类命名时会静默返回 undefined，不报错也不提醒。而 getAttribute() 直接读取原始 HTML 字符串，完全不受驼峰转换规则限制，兼容所有合法 data-* 名（含数字开头、下划线、大小写混用）。服务端渲染输出的 data-initial-state='{"count": 10}'，必须用 getAttribute() 拿到原始字符串，再手动 JSON.parse() —— dataset 会把它当无效名忽略。
dataset.xxx 只适合命名完全合规的场景
只有属性名严格满足「全小写 + 连字符」才可安全使用 dataset 点语法。例如：data-user-id → el.dataset.userId；data-api-endpoint → el.dataset.apiEndpoint。但以下情况必须绕开 dataset：
-
data-2024-report：只能用el.dataset["2024Report"]，点号访问失败 -
data-productName（含大写）：浏览器解析为data-productname，dataset.productName读不到，dataset.productname才对 -
data-config-json值为{"theme":"dark"}：dataset 返回字符串，不是对象，必须自己JSON.parse()
写入和删除必须用 setAttribute / removeAttribute
el.dataset.foo = "bar" 不会真正写入 DOM，只改内存副本；刷新页面后值丢失。动态新增属性也一样：el.dataset.newProp = "val" 不会生成 data-new-prop 属性，getAttribute("data-new-prop") 返回 null。
- 新增或更新：用
el.setAttribute("data-foo", "value") - 删除：用
el.removeAttribute("data-foo")，比delete el.dataset.foo更可靠（后者在某些旧环境不触发 DOM 更新） - 判断是否存在：用
"foo" in el.dataset或el.hasAttribute("data-foo")，别依赖el.dataset.foo !== undefined
SSR 和框架中 data-* 属性容易被“吃掉”
服务端渲染时，HTML 已含 data- 属性，但首次 JS 执行前 el.dataset 是空对象；Vue/React 默认不把 data- 属性透传到根元素或子组件 props 中。此时唯一可靠的方式是：el.getAttribute("data-xxx") —— 它在 HTML 解析完成后立即可用，不依赖 JS 初始化。
敏感字段如 data-token、data-phone 绝对禁止出现在 HTML 源码里；复杂状态别硬塞进 data-，它只是“公开的元数据口袋”，不是状态管理器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
