data-*属性默认不继承是设计使然，需手动透传；其渲染性能影响可忽略，但读写需注意类型转换与响应式限制。
Vue/React 中 data-* 属性为什么默认不生效
框架组件的根元素不会自动继承父级传入的 data-* 属性——这不是 bug，是设计使然。Vue 和 React 默认只把明确声明为 props 的属性挂载到渲染后的 DOM 上，data-tracking-id="abc" 这类属性会被直接过滤掉。
常见错误现象：<mybutton data-id="123"></mybutton> 渲染后 DOM 里根本找不到 data-id；用 document.querySelector('button').dataset.id 读出来是 undefined。
- Vue 需显式在组件内用
inheritAttrs: false+v-bind="$attrs"手动透传（仅适用于非 prop 属性） - React 需在组件中解构
...restProps并return <button></button> - 若组件用了
React.forwardRef或封装了多层 wrapper，透传链断裂更常见
data-* 透传对首屏渲染性能的影响几乎为零
data-* 是纯 DOM 属性，浏览器解析时不做任何计算或触发重排重绘，它既不参与样式计算，也不影响 layout、paint 或 composite 阶段。只要不配合 JS 频繁读写 dataset，它就是“静默存在”的。
但注意两个真实瓶颈点：
- 大量
data-*属性（如单个元素带 20+ 个）会略微增大 HTML 字节数，对 gzip 后体积影响微乎其微，但 SSR 模板字符串拼接时可能拖慢几微秒 - 如果在
useEffect或mounted钩子中遍历所有data-*并做 JSON 解析（比如JSON.parse(el.dataset.config)），会引入同步阻塞，尤其在列表项多时明显 - 避免在
render函数里反复调用el.dataset.xxx——应缓存或提前提取到 state/props
跨框架通信时 data-* 不是可靠通道
微前端场景下（比如 qiankun + Vue 子应用），父容器给子应用容器挂 data-env="prod"，子应用 JS 能读到，但这个值无法被子应用的框架响应式系统监听——它不是 reactive source，改了也不会触发重新渲染。
真正的问题在于生命周期错位：子应用 mount 完成后才去读 dataset，而父应用可能早于子应用初始化就设置了该属性；若父应用动态修改 el.setAttribute('data-env', 'test')，子应用无感知。
- 想让子应用响应变化？必须手动监听
MutationObserver观察 attribute 变更，且只监听目标属性（attributes: true, attributeFilter: ['data-env']） - 更稳妥的做法是把
data-*当作“启动参数”，只在子应用初始化阶段读一次，后续状态交由 props / context / 自定义事件同步 - 不要用
data-*传递实时更新的配置（如主题色切换），这类需求应走postMessage或全局 event bus
dataset 读写性能比 getAttribute 快，但有隐式转换陷阱
el.dataset.foo 内部做了连字符转驼峰、空格截断等处理，比 el.getAttribute('data-foo') 多一层逻辑，但实测差异在纳秒级，日常无需纠结。真正要小心的是类型丢失：
-
data-count="42"→dataset.count === '42'（永远是字符串） -
data-is-active="true"→dataset.isActive === 'true'，不是布尔值 -
data-user-id="U-123"→dataset.userId === 'U-123'，连字符被吞掉，但原始格式已不可逆 - 需要数值/布尔/对象时，务必手动转换：
parseInt(el.dataset.count, 10)、el.dataset.isActive === 'true'、JSON.parse(el.dataset.config || '{}')
最易被忽略的一点：dataset 修改不会触发 attributeChangedCallback，只有 setAttribute('data-x', 'y') 才会——自定义元素中若依赖此回调，千万别用 dataset.x = 'y'。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
