Vue3中如何在所有导入完成后执行函数？

可能的原因及对应方案 #

1. 变量是异步初始化的（最常见情况） #

如果../main中的testvar是通过异步操作（比如请求数据、大文件解析）初始化的，直接导出未完成的变量会导致组件导入时变量还未赋值。

修改../main的导出方式：
把变量包装成Promise导出：

// ../main.ts
// 示例：异步获取大型数据
export default new Promise((resolve) => {
  // 模拟耗时操作（比如读取大文件、请求接口）
  setTimeout(() => {
    const largeData = {/* 你的大型对象 */};
    resolve(largeData);
  }, 1000);
});

组件中异步获取变量：
在onMounted中使用async/await等待Promise完成：

<script lang="ts" setup>
import { onMounted } from "vue";
import testvarPromise from "../main";

onMounted(async () => {
  const testvar = await testvarPromise;
  console.log(testvar);
});
</script>

2. 存在模块循环依赖 #

如果你的组件和../main之间存在循环导入（比如组件导入main，main又导入组件），会导致ES模块加载时变量未完成初始化。

解决方法：

• 将大型变量单独抽离到一个独立的模块中，避免循环引用。
• 或者在需要使用的地方通过动态导入延迟加载。

3. 使用动态导入延迟加载大型变量 #

如果不想让大型变量阻塞组件的初始加载，可以直接在onMounted中动态导入：

<script lang="ts" setup>
import { onMounted } from "vue";

onMounted(async () => {
  // 动态导入模块，等待加载完成后获取变量
  const { default: testvar } = await import("../main");
  console.log(testvar);
});
</script>

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