如何在Vue3和Vite中正确设置加载屏幕？

Question

我想在应用程序加载时设置加载屏幕。我目前正在使用 Loading 组件并将其时间间隔设置为 2 秒。然而，这不是设置加载屏幕的正确方法。处理整个应用程序加载状态的最佳方法是什么？

我直接在

App.vue

的router-view中使用了Loading组件，所以我不必在App的每个组件中都使用Loading组件。

以下是我的

App.vue

<template>
  <v-app class="container">
    <v-app-bar color="green" class="app-bar">
      <v-toolbar-title class="ml-0 pl-4">
        <span class="hidden-sm-and-down">{{ appName }}</span>
      </v-toolbar-title>
      <v-btn rounded depressed dark large @click="gotoHome()">
        <h3>Dashboard</h3>
        <v-icon class="px-2">mdi-ballot</v-icon>
      </v-btn>
      <v-btn rounded depressed dark large @click="dialog = !dialog">
        <h3>Markets</h3>
        <v-icon class="px-2">mdi-apps</v-icon>
      </v-btn>
      <v-btn rounded depressed dark large @click="gotoSettings()">
        <h3>Settings</h3>
        <v-icon class="px-2">settings</v-icon>
      </v-btn>
      <v-btn rounded depressed dark large @click="gotoVerus()">
        <h3>Verus</h3>
        <v-icon class="px-2">mdi-apps</v-icon>
      </v-btn>
    </v-app-bar>
    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <v-toolbar>
          <v-btn dark @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>Markets</v-toolbar-title>
          <div class="flex-grow-1"></div>
          <v-toolbar-items>
            <v-btn dark text @click="dialog = false">back</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-list three-line subheader>
          <v-subheader>Go to markets</v-subheader>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>Informational Section</v-list-item-title>
              <v-list-item-subtitle>Please wait for the available market links to load</v-list-item-subtitle>
              <AppMarkets v-on:gotoMarket="gotoMarket" :key="componentKey" />
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-card>
    </v-dialog>
    <v-navigation-drawer
        v-model="drawer"
        location="left"
        temporary
      >
        <v-list
          :items="items"
        ></v-list>
      </v-navigation-drawer>
      <Loading v-if="loading"></Loading>
      <router-view v-else>
      </router-view>
  </v-app>
</template>


<script>
import AppMarkets from './views/AppMarkets.vue'
import {ref, onMounted} from 'vue'
import Loading from './Loading.vue'


export default {
  name: 'App',
  components: {
    AppMarkets,
    Loading
},
  props: {
    source: String
  },
  setup() {
    const loading = ref(true);
    onMounted(() => {
      // For demonstration purposes, setting loading to true for 2 seconds.
      setTimeout(() => {
        loading.value = false;
      }, 2000);
  });
    return {
      loading,
    };
  },

  methods: {
    gotoHome() {
      this.$router.push('/')
    },
    gotoSettings() {
      this.$router.push('/settings')
    },
    gotoVerus() {
      this.$router.push('/verus')
    },
    gotoMarket: function(base, rel) {
      console.log("Going to new market..." + base + "/")// + rel)
      console.log(this.componentKey)
      this.componentKey += 1
      this.dialog = !this.dialog
      window.location.href='/traderview/'+base+'/'+rel;
    },
    doAction: function(command) {
      window.location.href = "/" + command.toLowerCase().replace(/ /g, "");
    }
  },
  data: () => ({
    appName: 'OrderBook Live',
    base: '',  
    componentKey: ref(0),
    dialog: ref(false),
    drawer: ref(false),
  }),
  
  
}
</script>

Answer 1

在Vue 3中，组件的生命周期会经历从创建到销毁的几个阶段。关键的生命周期挂钩是：

在您的情况下，您可以将加载设置为 true beforemount 并在组件完全加载到 mounted 时设置为 false 或者如果有任何数据请求，您也可以在该请求中使用它

BeforeCreate：在创建实例之前触发。至此，数据观察、事件、观察者都设置好了，但是模板编译还没有发生。

Created：创建实例后调用created钩子。此时实例已初始化，您可以访问数据、方法和事件。

BeforeMount：在安装开始之前调用。虚拟 DOM 已创建，组件即将渲染。

Mounted：在组件安装到 DOM 后调用此钩子，这意味着它已完全加载并可见。它通常用于在组件渲染后进行 API 调用或操作 DOM。

BeforeUpdate：当数据发生变化且组件即将重新渲染时，会调用此钩子。您可以在更新之前执行操作。

Updated：在数据更改导致组件重新渲染后调用。此时，DOM 已更新以反映最新的更改。

BeforeUnmount：在卸载组件之前调用。您可以在这里执行清理操作。

Unmounted：组件被卸载并销毁后调用。它用于清理和释放资源。