react中data-*属性不会自动透传到dom，必须显式解构或展开props并绑定到真实dom元素上，否则dataset读取失败；且dataset值全为字符串，需手动类型转换。
React 中 data-* 属性不能自动透传到 DOM，必须显式处理；直接写在 JSX 上、指望 event.target.dataset 能读到全部值，大概率失败。
data-* 属性不会默认出现在最终 DOM 上
你在 <mybutton data-id="123" data-type="submit"></mybutton> 里写的属性，如果 MyButton 是个普通函数组件且没做任何处理，渲染出来的 <button></button> 标签里根本不会有这些 data-* 属性——框架把它们当“未声明 props”过滤掉了。
- Vue 需要
inheritAttrs: false+v-bind="$attrs" - React 函数组件默认不接收
data-*，必须手动解构或展开：const { 'data-id': id, ...rest } = props，再<button></button> - 类组件同理，得用
this.props['data-id']或解构const { 'data-id': id } = this.props
dataset 读取有驼峰陷阱，别全信自动转换
event.target.dataset 看似方便，但只对字母+连字符生效；含数字、下划线、多连字符时，dataset 字段压根不存在。
-
data-user-id→ 可读为event.target.dataset.userId -
data-2024-id→dataset.2024Id语法非法，必须用event.target.getAttribute('data-2024-id') -
data-user_name→dataset.user_name是undefined，同样得用getAttribute -
data-config='{"timeout":5000}'→ 必须包try/catch再JSON.parse()，否则初始化就崩
数值和布尔值全是字符串，别直接当 JS 原生类型用
dataset.count 永远是字符串 "42"，不是数字；dataset.enabled 是字符串 "false"，但 JS 判断为真值。
- 转数字：用
+el.getAttribute('data-count')或Number(el.getAttribute('data-count'))，避免parseInt("42px", 10)截断风险 - 判布尔：写
el.getAttribute('data-enabled') === "true"，而不是if (dataset.enabled) - 不要用
dataset赋值来驱动视图更新：改了el.dataset.active = "false"，DOM attribute 不一定同步，attributeChangedCallback也不会触发
真正可靠的状态通道只有 class 和 hidden
如果你的目标是让 UI 响应状态变化，data-* 不是设计用来干这个的。浏览器原生支持属性变更 → 视图重绘的，只有 class 和 hidden。
-
hidden是布尔属性：存在即隐藏，移除即显示；旧版 Safari 需 fallback 到style.display = 'none' -
class推荐用element.classList.toggle('loading')，比拼className安全，CSS 能立即响应 -
title、lang、data-*这些都不触发重绘，别拿它们控制显示逻辑
最常被忽略的一点：SSR 渲染时，服务端生成的 dataset 值和客户端初始值可能不一致，diff 阶段容易误删或重复挂载——这问题在 hydration 后才暴露，很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
