现代前端框架中data-*属性默认不透传，需主动干预：Vue需v-bind="$attrs"或inheritAttrs:false手动绑定，React需显式spread；dataset访问性能无损耗，但命名须全小写连字符，且不可用于敏感信息传输。
现代前端框架（Vue/React）中，data-* 属性默认不透传，直接写在组件标签上会被丢弃——这不是 bug，是设计使然。想让它生效，必须主动干预。
Vue 中 data-* 为什么在子组件里读不到
Vue 组件默认只把显式声明的 props 和 v-bind="$attrs" 透传下去。data-* 属性不属于这两类，所以挂载时就被过滤掉了。
- 错误写法：
<MyButton data-track-id="submit-login"></MyButton>→ 子组件根元素上查不到该属性 - 正确做法：在父组件模板中加
v-bind="$attrs"到子组件根元素，或在 script 中用defineOptions({ inheritAttrs: false })+ 手动绑定 - 如果用了
inheritAttrs: false却没手动v-bind，那data-*就彻底消失了，连getAttribute都调不到 - 注意：
$attrs包含所有非 prop、非事件的属性，但 Vue 3.4+ 开始会自动过滤掉data-*以外的自定义属性（如user-id），所以只靠$attrs不够保险
React 中 data-* 透传要靠 spread operator
React 没有类似 $attrs 的隐式机制，data-* 必须显式透传，否则根本不会出现在 DOM 上。
- 错误写法：
<MyButton data-tracking="signup" />→ 渲染后 DOM 根节点无此属性 - 正确写法：子组件根元素用
{...props}或筛选后透传：<button {...Object.fromEntries(Object.entries(props).filter(([k]) => k.startsWith('data-')))}> - 别用
Object.assign({}, props)直接 spread —— 它会把key、ref等内部字段也透过去，可能触发 React 警告 - 若子组件是函数组件且未返回 JSX 根节点（比如用了 Fragment），
data-*会无处落脚，直接丢失
dataset 读取在框架内是否变慢
不会。无论是否在框架内，dataset 访问都是 DOM 原生操作，性能与纯 HTML 场景一致，瓶颈只在 JS 层调用频次和节点数量。
立即学习“前端免费学习笔记（深入）”；
-
el.dataset.xxx是只读代理，底层仍走getAttribute，没有额外解析开销 - 大量节点循环读
dataset（如渲染 1000 行表格每行带data-id）时，比直接缓存Map<id, el>稍慢，但差异在微秒级，无需优化 - 真正拖慢的是误用：比如在
useEffect里反复querySelectorAll('[data-role]').forEach(...)，而不是用事件委托 +event.target.dataset - IE11 下
dataset对连字符转驼峰有兼容性问题（data-user-id→dataset.userId可能为undefined），建议降级用getAttribute('data-user-id')
微前端场景下 data-* 初始化配置的边界限制
data-* 只在子应用首次挂载时有效，它不是通信管道，不能用于运行时更新或跨 iframe 同步。
- 主应用写：
<micro-app data-tenant-id="prod-789" data-debug="true" src="./subapp.js"></micro-app> - 子应用在
connectedCallback或useEffect(() => { ... }, [])中读取，之后再改setAttribute不会触发子应用响应（除非你自己监听attributeChangedCallback） - 不要试图用
data-*传递 token、用户邮箱等敏感信息——源码里明文可见，毫无安全性可言 - 若子应用是远程加载的 ES Module，
data-*必须在<script>标签前就存在 DOM 中，否则 JS 执行时已不可见
最易被忽略的一点：命名必须全小写 + 连字符。写成 data-UserId 或 data_user_id，dataset 就完全失效，而 getAttribute 虽能取到，但失去了语义映射优势——这种错在代码 review 时极难发现。
