Vue3 Script Setup中onMounted内ref为null的问题咨询

问题原因 #

你遇到的情况大概率是Vuetify的<v-app>组件存在异步初始化逻辑（比如主题加载、布局计算等），导致内部的<div>元素在当前组件的onMounted钩子触发时还未完成DOM挂载，即使调用nextTick也无法获取到DOM引用。

可行解决方案 #

1. 利用<v-app>的ready事件 #

Vuetify的<v-app>组件提供了ready事件，会在组件完成所有初始化和DOM渲染后触发，此时可以安全获取内部元素的ref：

<script setup>
import { ref } from 'vue';

const fogElement = ref(null);

const handleAppReady = () => {
  console.log(fogElement.value); // 此时可正常获取DOM元素
  // 在这里执行你的背景动画逻辑
};
</script>

<template>
  <v-app @ready="handleAppReady">
    <v-main>
      <div class="fill-height bg-tertiary" ref="fogElement">
        <router-view/>
      </div>
    </v-main>
  </v-app>
</template>

2. 结合watch与onMounted（优化你当前的监听方案） #

如果不想依赖Vuetify的事件，可以在onMounted中启动一个监听，一旦ref不为空就执行逻辑并停止监听：

<script setup>
import { ref, onMounted, watch } from 'vue';

const fogElement = ref(null);

onMounted(() => {
  const unwatch = watch(fogElement, (el) => {
    if (el) {
      console.log(el);
      // 执行背景动画逻辑
      unwatch(); // 获取到元素后停止监听
    }
  }, { immediate: true });
});
</script>

<template>
  <v-app>
    <v-main>
      <div class="fill-height bg-tertiary" ref="fogElement">
        <router-view/>
      </div>
    </v-main>
  </v-app>
</template>

3. 手动等待DOM稳定（兜底方案，不推荐） #

如果以上方法都无效，可以使用setTimeout给DOM足够的渲染时间（时间可根据实际情况调整）：

<script setup>
import { ref, onMounted } from 'vue';

const fogElement = ref(null);

onMounted(() => {
  setTimeout(() => {
    console.log(fogElement.value);
    // 执行背景动画逻辑
  }, 100);
});
</script>

关键说明 #

• nextTick失效的原因：它仅保证当前组件的DOM更新完成，但无法确保第三方组件（如Vuetify的<v-app>）的异步渲染流程结束。
• 优先选用<v-app>的ready事件：这是Vuetify官方提供的组件初始化完成回调，可靠性最高。

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