vue/react 中 data-* 属性默认不透传，必须显式处理：vue 需 inheritattrs: false + v-bind="$attrs"，react 需解构 props 或展开运算符；dataset 读取遵循驼峰转换规则，但含数字、下划线时须用 getattribute。
Vue/React 中 data-* 属性默认不透传，必须显式处理
框架组件不会自动把 data-tracking-id、data-feature 这类属性挂到根元素上。你在模板里写 <mybutton data-tracking-id="click-home"></mybutton>，但组件内部没做任何声明，那这个属性就彻底丢失了——不是隐藏，是根本没进 DOM。
常见错误现象：开发者以为属性“应该在”，结果 document.querySelector('button').dataset.trackingId 返回 undefined，反复检查 HTML 源码也没问题，其实是框架拦截了。
- Vue：需在组件定义中用
inheritAttrs: false+ 手动绑定v-bind="$attrs"（或使用defineOptions({ inheritAttrs: false })+attr透传） - React：函数组件默认不接收
data-*，需用...props或显式解构const { 'data-tracking-id': trackingId, ...rest } = props，再<button></button> - 注意：Svelte 和 Solid 也遵循类似逻辑，没有“自动继承”这回事
dataset 读取时的驼峰转换规则和边界情况
dataset 看起来方便，但命名转换有固定规则：连字符（-）后的字母自动大写，其余全小写。比如 data-user-id → dataset.userId，data-api-url → dataset.apiUrl。但它不处理数字开头或含特殊字符的 name。
容易踩的坑：data-2024-active 无法通过 dataset.2024Active 访问（语法错误），data-user_name（下划线）也不会转成 dataset.userName（dataset.user_name 无效，下划线不触发驼峰）。
- 安全写法：一律用
getAttribute('data-2024-active')处理含数字、下划线、多个连字符的属性 -
dataset只返回字符串，data-count="42"→dataset.count === "42"，要数值就得parseInt(el.getAttribute('data-count'), 10) - 布尔值同理：
data-enabled="true"读出来还是字符串"true"，不是 JS 的true
setAttribute 与 dataset 赋值行为不一致
修改 data-* 属性时，el.dataset.foo = 'bar' 和 el.setAttribute('data-foo', 'bar') 效果不同：前者会同步更新 dataset，后者会同步更新 DOM attribute，但前者在某些旧版 Safari 中有兼容性问题；更重要的是，只有 setAttribute 能触发 attributeChangedCallback（Custom Element 生命周期钩子）。
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
典型场景：你写了个自定义元素，监听 data-theme 变化来切样式，如果只用 el.dataset.theme = 'dark'，回调根本不会执行。
- 需要响应式更新时，优先用
setAttribute('data-theme', 'dark') - 仅需 JS 内部读写、不依赖 DOM 变更钩子时，
dataset更简洁 -
dataset删除属性用delete el.dataset.foo，但等价于removeAttribute('data-foo')
data-* 不是跨微前端通信手段，别当 MessageChannel 用
data-* 只在当前 DOM 树内有效。iframe 之间、不同微应用实例之间（哪怕同域），DOM 节点不共享，data- 属性自然也不互通。有人试图用它传配置给子应用，结果发现子应用里完全读不到。
真实限制：它只是静态挂载在某个元素上的字符串属性，没有事件广播、没有跨上下文监听能力。想做微前端间通信，得用 postMessage、CustomEvent（配合 window 发送）、或统一状态管理（如 qiankun 的 initGlobalState）。
顺带提醒：data-role="tab" 对屏幕阅读器不可见，也不能替代 role="tab" —— 它纯属 JS 用，跟 ARIA 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
