vue 不自动将 data-* 属性转为响应式数据，因其默认不进入 $attrs；需在 onmounted 中用 getattribute() 安全读取并手动解析，避免 ssr 陷阱与类型错误。
Vue 本身不自动把 data-* 属性转成响应式数据，直接在模板里写 {{ $attrs['data-id'] }} 或读 dataset 通常拿不到值——因为这些属性默认不进 $attrs，也不触发响应式更新。
为什么 data-* 在 Vue 模板里读不到？
Vue 3 的 $attrs 默认只包含未被 props 声明、且不是原生 HTML 属性（如 id、class）的透传属性；data-pagenumber 这类自定义属性不会自动出现在 $attrs 里，除非你显式启用 inheritAttrs: false 并手动处理。
-
data-user-id写在父元素上，子组件 setup 中访问ctx.attrs['data-user-id']是undefined -
v-bind:data-id="userId"是单向渲染：JS 改userId→ DOM 更新data-id，但反过来不成立 - SSR 场景下，服务端首次渲染时
dataset还没生成，ref.value为null，不能在setup()同步读
在 onMounted 中用 getAttribute() 安全取值
这是最稳定、兼容性最好、且能避开 SSR 陷阱的做法：等 DOM 挂载后，用原生 DOM 方法读取父级或自身元素的 data-* 值，并赋给响应式变量。
- 给子组件根元素加
ref="rootEl" - 在
onMounted里执行：const value = rootEl.value?.parentElement?.getAttribute('data-config') - 如果需要解析 JSON，必须包
try/catch：JSON.parse(value || '{}') - 别用
dataset.config——它对非法命名（如data-2024-report）或含大写字母的属性不可靠
想让 data-* 变成响应式 prop？得手动声明 + 显式同步
如果你希望父容器的 data-page-id="123" 自动变成子组件的 pageId: number prop，不能靠框架自动推导，必须自己桥接。
- 子组件
props需显式声明：pageId: { type: Number, default: 0 } - 在
onMounted中读取getAttribute('data-page-id')，再用parseInt()转类型 - 如果父级可能动态改
data-page-id（比如通过 JS 修改），需监听attributeChangedCallback——但这仅适用于自定义元素，普通 Vue 组件不支持 - 避免在
computed或watch里反复查 DOM，性能差且不可靠
真正容易被忽略的是：哪怕你写了 data-config='{"theme":"dark","mode":"auto"}'，JS 读出来永远是字符串；没人帮你 JSON.parse，也不会报错，只会静默返回 undefined。每次取值都得自己做类型转换和错误兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
