Vue3/Nuxt3路由切换时无法访问模板Ref属性的问题

为什么onMounted里拿不到正确的offsetWidth？ #

onMounted钩子确实表示组件自身的DOM已经挂载到页面，但这并不等同于整个页面的布局计算完全完成，尤其是在Nuxt3路由切换场景下，可能存在以下原因：

• 路由过渡/动画影响：Nuxt默认的路由切换带有过渡效果，组件挂载后，过渡动画的样式（如opacity、transform）可能仍在执行，导致元素的布局状态尚未稳定。
• 异步样式加载：如果样式是异步加载（比如Nuxt的组件样式懒加载、第三方样式库延迟加载），组件挂载时样式还未生效，元素尺寸自然无法正确计算。
• 父元素布局延迟：当前元素的宽度依赖父组件尺寸时，若父组件因异步数据、动态样式等原因未完成布局计算，子元素的offsetWidth也无法正确获取。

nextTick和watchEffect失效的原因：

• nextTick仅等待当前组件的DOM更新完成，无法等待样式加载、父元素布局这类异步操作的完成。
• watchEffect若仅监听ref的存在，只能感知元素挂载，无法感知元素布局的变化。

可靠的解决方案 #

方案1：使用ResizeObserver监听元素尺寸变化 #

ResizeObserver可以监听元素的尺寸变化，当元素的offsetWidth稳定后再获取值：

<template>
  <div ref="sample"></div>
</template>

<script setup>
const sample = ref()
let resizeObserver = null

onMounted(() => {
  resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      console.log(entry.target.offsetWidth)
      // 获取到稳定值后可取消监听
      resizeObserver.unobserve(entry.target)
    }
  })
  if (sample.value) {
    resizeObserver.observe(sample.value)
  }
})

onUnmounted(() => {
  if (resizeObserver && sample.value) {
    resizeObserver.unobserve(sample.value)
  }
})
</script>

方案2：使用requestAnimationFrame等待布局完成 #

requestAnimationFrame会在浏览器下一次重绘前执行，能确保布局计算完成：

<template>
  <div ref="sample"></div>
</template>

<script setup>
const sample = ref()

onMounted(() => {
  const getWidth = () => {
    const width = sample.value.offsetWidth
    if (width !== 0) {
      console.log(width)
    } else {
      requestAnimationFrame(getWidth)
    }
  }
  requestAnimationFrame(getWidth)
})
</script>

方案3：临时禁用路由过渡（调试用） #

如果是路由过渡导致的问题，可临时禁用Nuxt的路由过渡验证：

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

总结 #

onMounted只保证组件DOM挂载完成，但不保证布局计算、样式加载等后续操作完成。避免使用setTimeout（延迟时间不可控，不同设备可能失效），优先使用ResizeObserver或requestAnimationFrame来监听/等待元素尺寸稳定。

内容的提问来源于stack exchange，提问作者Birleyici