vue 中 data-* 属性渲染后消失，是因为默认不声明为 prop 时不会进入 $attrs，需设置 inheritattrs: false 并手动 v-bind="$attrs" 绑定；若声明为 prop 则不透传。
Vue 中 data-* 属性为什么渲染后消失
因为 Vue 默认会过滤掉所有非 prop 声明的属性，data-tracking-id 这类属性根本不会进入组件的根元素 DOM。它不是被隐藏了，是压根没传进去。
必须显式配置：inheritAttrs: false + 在模板中用 v-bind="$attrs" 手动挂载到目标元素上。否则 document.querySelector('button').dataset.trackingId 一定返回 undefined。
- 如果组件用了
<slot></slot>或封装了多层 wrapper，透传链容易断裂，得逐层检查是否漏了v-bind="$attrs" - 使用
defineOptions({ inheritAttrs: false })是 Composition API 下更简洁的写法 - 注意：只有非 prop 属性才走
$attrs，如果data-id同时被声明为 prop，那它会被优先当 prop 处理，不再进$attrs
React 中 data-* 属性不生效的典型原因
函数组件默认不接收任何未声明的 props，data-feature="search" 不会自动出现在 props 对象里——它被 React 引擎直接丢弃了。
正确做法是解构或展开：{...restProps} 或显式提取 const { 'data-feature': feature, ...rest } = props，再把 rest 传给底层元素。
- 若用了
React.forwardRef，必须确保 ref 和 rest props 都正确转发，漏掉任意一个都会导致 data-* 断链 - 高阶组件（HOC）或自定义 hook 封装后，容易忘记透传
...props，建议在包装组件结尾统一加{...restProps} - Svelte、Solid 等框架逻辑类似，不存在“自动继承”，都需显式处理
dataset 读取时命名转换的坑与绕过方式
dataset 的驼峰转换规则只认小写字母 + 连字符组合，data-user-id → dataset.userId 没问题，但以下全无效：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
data-2024-active：不能用dataset.2024Active（语法错误），得用dataset["2024Active"]或getAttribute('data-2024-active') -
data-user_name：下划线不触发转换，dataset.userName返回undefined，只能用getAttribute -
data-API-Key：大写字母开头破坏规则，浏览器可能忽略该属性，或仅支持getAttribute读取
安全底线：只要命名含数字、下划线、大写字母或多个连续连字符，一律放弃点号访问，改用 getAttribute('data-xxx')。
data-* 透传对首屏性能的影响到底有多大
几乎为零。data-* 是纯字符串属性，浏览器解析 HTML 时不做计算、不触发 layout/paint、不参与样式匹配。gzip 后多几个属性，体积增加通常小于 10 字节。
但有两个真实瓶颈点容易被忽略：
- 在
useEffect/mounted里遍历所有dataset并做JSON.parse(el.dataset.config)—— 这是同步阻塞操作，列表项一多就卡顿 - 在 render 函数里反复调用
el.dataset.xxx，尤其配合map渲染大量 item 时，应提前缓存或提至 state/props
真正影响性能的从来不是 data-* 本身，而是你读它的方式和时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
