如何在 App.vue 上设置 vue 加载组件答案

【问题标题】：how to set vue loading component on App.vue如何在 App.vue 上设置 vue 加载组件
【发布时间】：2021-09-28 20:58:28
【问题描述】：

我想将加载器添加到位于 main.js 中的 app.vue。当我将超时设置为 5ms 时，错误组件加载正常。但是延迟似乎对加载组件没有任何影响，它根本不显示加载组件。


import { createApp, defineAsyncComponent } from 'vue';
import loadScreen from '@components/companyLoader.vue'
const App = defineAsyncComponent({
  loader: () => import('./App.vue'),
  delay: 200,
  timeout: 3000,
  loadingComponent: loadScreen,
  errorComponent: loadScreen, //runs when timeout set to 5ms
})



const app = createApp(App)
app.mount('#app')

【问题讨论】：

标签： javascript vue.js vue-component vuejs3 vue-composition-api

【解决方案1】：

我不知道是什么原因，但我有一个解决方法。在 Vue v3.2.8 上测试。您将需要一个正常加载的包装器组件 (AppWrapper) 和一个异步加载的内部组件 (App)。

您可以使用这个小功能手动检测组件何时加载：

/** Returns a promise that resolves when the async component is loaded. */
const componentLoaded = (asyncComponent, pollFrequency = 100) =>
  new Promise(resolve => {
    const timerRef = {}
    timerRef.current = setInterval(() => {
      if (asyncComponent.__asyncResolved) {
        clearInterval(timerRef.current)
        resolve(asyncComponent.__asyncResolved)
      }
    }, pollFrequency)
  })

在加载异步组件 (App) 时，只需在包含组件 (AppWrapper) 上设置 this.loaded：

  created() {
    componentLoaded(App).then(() => {
      this.loaded = true
    })
  },

然后使用loaded有条件地渲染一个加载组件：

  <v-if="!loaded" LoadingComponent />
  <App />

（注意你不能在<App>上使用v-else，因为它会阻止异步组件加载。它需要渲染才能异步加载。你可以使用v-show。）

【讨论】：

我最后做了类似的事情。我只是最终让 App.vue 采用了一个带有加载器的子组件。仍然不确定为什么这是一个问题，当您查看它产生的块时，它应该可以工作，因为 vue 核心与组件是分开的