Vue 3 - 显示加载器，直到加载所有子组件答案

【问题标题】：Vue 3 - show loader until all child components are loadedVue 3 - 显示加载器，直到加载所有子组件
【发布时间】：2022-01-12 16:27:21
【问题描述】：

我在等待其他组件加载时无法显示 Vue 加载器组件。

<div id="app">
    <loader v-if="!componentsReady"></loader>
    <some-page v-else></some-page>
</div>

<Loader> 不显示，因为它本身是一个 vue 组件。（基于逻辑它正在等待所有子组件加载）

app.js

这里我要显示Loader组件，等到SomePage组件及其子组件加载完毕。

在 mounted 上，我设置组件已准备就绪，但这样我也不会显示 Loader 组件，因为它不是异步的。

import Loader from "./Loader";

const app = createApp({
    data() {
        return {
            componentsReady: false
        }
    },
    components: {
        SomePage: defineAsyncComponent(() => import('./somePage')),
        Loader
    },
    mounted() {
        this.$nextTick(() => {
            this.componentsReady = true;
        });
    }
});

app.mount('#app');

【问题讨论】：

在我看来问题在于，您在mounted() 的mounted() 钩子中设置了componentsReady=true，而不是在组件中的钩子。
@D.Schaller 可能是这样，但是我在那里注册了一堆组件，所以我在想我是否可以在一个地方而不是在每个组件中做到这一点？有没有一种方法可以立即加载 Loader 组件，而无需考虑 $nextTick？

标签： vue.js vuejs3

【解决方案1】：

在 vue3 中，您有一个 Suspense 组件可能有助于 cf。 https://v3.vuejs.org/guide/migration/suspense.html

但我认为您正在寻找的更像是 v-cloak 指令 cf。 https://v3.vuejs.org/api/directives.html#v-cloak

【讨论】：

我找到了 Suspence，但它说它不应该在生产中。如果 v-cloak 有效，将尝试。谢谢！