Vue3 defineAsyncComponent() Funktion

Vue3 全局 APIVue3 Global API

defineAsyncComponent()Es ist eine in Vue 3 eingeführte Funktion zum asynchronen Laden von Komponenten. Sie ermöglicht es, eine Komponente nur bei Bedarf zu laden, anstatt alle Komponenten auf einmal beim Start der Anwendung zu laden. Dies ist sehr nützlich, um die Leistung großer Anwendungen zu optimieren und die anfängliche Ladezeit zu reduzieren.

Warum defineAsyncComponent() verwenden?

Bei der Entwicklung großer Anwendungen kann das Laden aller Komponenten beim Start der Anwendung zu einer zu langen initialen Ladezeit führen und die Benutzererfahrung beeinträchtigen. Durch die Verwendung vondefineAsyncComponent(), können Sie das Laden bestimmter Komponenten verzögern. Erst wenn Benutzer die relevante Seite oder Funktion besuchen, werden diese Komponenten geladen, wodurch die Leistung der Anwendung verbessert wird.

Wie verwendet man defineAsyncComponent()?

Grundlegende Verwendung

UmdefineAsyncComponent(), müssen Sie es aus Vue importieren und an die Komponente übergeben, die asynchron geladen werden soll. Das folgende ist ein einfaches Beispiel:

Beispiel

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
};

In diesem Beispiel,MyComponent.vuedie Komponente wird bei Bedarf asynchron geladen.

Umgang mit Ladezuständen

defineAsyncComponent()Es ermöglicht Ihnen außerdem, Ladezustände zu definieren, wie z. B. Laden, Ladefehler usw. Sie können diese Zustände konfigurieren, indem Sie ein Objekt übergeben:

Beispiel

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // Komponente, die während des Ladens angezeigt wird
  errorComponent: ErrorComponent, // Komponente, die angezeigt wird, wenn das Laden fehlschlägt
  delay: 200, // Verzögerung, bevor die Ladekomponente angezeigt wird (ms)
  timeout: 3000 // Zeitlimit für das Laden (ms)
});

In dieser Konfiguration,LoadingComponentwird angezeigt, während die Komponente lädt,ErrorComponentwird angezeigt, wenn das Laden fehlschlägt.

Fehlerbehandlung

Wenn die Komponente nicht geladen werden kann,defineAsyncComponent()bietet eineonErrorCallback-Funktion zur Fehlerbehandlung:

Beispiel

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  onError(error, retry, fail, attempts) {
    if (error.message.includes('Failed to fetch dynamically imported module')) {
      retry(); // Laden erneut versuchen
    } else {
      fail(); // Laden abbrechen
    }
  }
});

In diesem Beispiel können Sie, wenn das Laden fehlschlägt, wählen, ob Sie das Laden erneut versuchen oder das Laden aufgeben.

Praktische Anwendungsfälle

Bedarfsgesteuertes Laden von Routen

In Vue Router können SiedefineAsyncComponent()verwenden, um Routenkomponenten bei Bedarf zu laden:

Beispiel

import { defineAsyncComponent } from 'vue';

const routes = [
  {
    path: '/about',
    component: defineAsyncComponent(() => import('./views/AboutView.vue'))
  }
];

Auf diese WeiseAboutView.vuewird die Komponente erst geladen, wenn der Benutzer/aboutdie Route besucht.

Verzögertes Laden großer Komponenten

Für einige große Komponenten können SiedefineAsyncComponent()um sie verzögert zu laden, wodurch sich die anfängliche Ladezeit reduziert:

Beispiel

const LargeComponent = defineAsyncComponent(() =>
  import('./components/LargeComponent.vue')
);

Vue3 全局 APIVue3 Global API

Andere Erweiterungen