data-*属性值为空字符串时，dataset仍返回空字符串而非undefined或null，这是规范行为；需显式检查el.dataset.attr === ""或结合hasattribute判断存在性，避免falsy误判。
data-* 属性值为空字符串时，dataset 读出来还是空字符串
浏览器不会因为 data-id="" 就忽略这个属性，它依然会被解析、存入 DOM，并能通过 dataset.id 读到 ""（空字符串）。这不是 bug，是规范行为——dataset 只做命名映射和类型擦除，不干预值内容。
常见误判场景：if (el.dataset.status) 判定失败，不是因为没这个属性，而是 "" 是 falsy 值。别指望它自动转成 undefined 或 null。
- 显式检查空值：
el.dataset.status === ""或!el.dataset.status && el.hasAttribute("data-status") - 需要“未设置”语义时，别写
data-status=""，直接不写该属性；用"status" in el.dataset判断是否存在 - 服务端模板渲染时，避免把
null或undefined渲染成data-value=""，应彻底省略该属性
setAttribute("data-x", "") 和删除属性效果完全不同
el.setAttribute("data-x", "") 会写入一个值为空字符串的属性，el.removeAttribute("data-x") 才真正移除它。这两者在 DOM 和 dataset 中表现截然不同：
-
getAttribute("data-x")：前者返回""，后者返回null -
"x" in el.dataset：前者为true，后者为false - CSS 选择器
[data-x]：前者匹配，后者不匹配
尤其在条件样式或 JS 逻辑中依赖属性存在性时，混用会导致状态错乱。例如 tooltip 组件只在 data-tooltip 存在时初始化，你设成空字符串，它照样触发。
空值参与 JSON 解析或数字转换时极易崩溃
哪怕 data-count="" 看似“没填”，JSON.parse(el.dataset.count) 会抛 SyntaxError，Number(el.dataset.count) 得到 NaN。这些都不是静默失败，而是运行时错误。
- 数字转换前先校验：
const count = el.dataset.count && !isNaN(el.dataset.count) ? Number(el.dataset.count) : 0 - JSON 解析必须包裹
try/catch，且默认 fallback 用空对象：JSON.parse(el.dataset.config || "{}") - 布尔判断别偷懒：
el.dataset.enabled === "true"，而不是Boolean(el.dataset.enabled)（空字符串、"false"都是true）
服务端渲染（SSR）下空 data 属性可能被框架过滤
Next.js、Nuxt、Remix 等框架在 HTML 序列化阶段，常把 data-* 值为空字符串的属性主动剔除，以减小体积。结果就是：服务端写了 data-id=""，客户端 el.dataset.id 是 undefined。
这不是浏览器问题，是框架行为。验证方式：查看页面源码（右键 → “查看页面源代码”），确认空值属性是否真实存在于原始 HTML 中。
- 若需保留空值语义，改用非空占位符，如
data-id="none"或data-id="-"，再在 JS 中约定解释 - 更稳妥的做法：关键状态不用
data-*传，走内联<script type="application/json"></script>注入，或由框架透传 props - Vue/React 中，
data-属性默认不继承到根元素，需显式用v-bind或...props透传
空 data 属性最麻烦的点不在“怎么设”，而在“怎么判”——它既不是缺失，也不是有效值，而是一种中间态。很多逻辑崩塌，都是因为把 "" 当成了 undefined 或 null 处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
