Wie kann ich mit Vue das asynchrone Laden und das Laden von Komponenten bei Bedarf implementieren?

Um die Leistung der Anwendung zu verbessern und die Größe der Anwendung zu reduzieren, verwenden wir bei der Entwicklung von Vue häufig asynchrones Laden und Laden von Komponenten bei Bedarf. Das asynchrone Laden von Komponenten ermöglicht es der Anwendung, Komponentencode nur bei Bedarf zu laden, anstatt alle Komponentencodes auf einmal zu laden, wodurch die Ladegeschwindigkeit verbessert und die Anwendungsgröße reduziert wird. Das Laden bei Bedarf ermöglicht es Anwendungen, Komponenten dynamisch über Routing zu laden, wodurch die Zeit für das erste Laden und die Initialisierung der Anwendung verkürzt wird.

In diesem Artikel wird erläutert, wie Sie mit Vue das asynchrone Laden und das bedarfsgesteuerte Laden von Komponenten implementieren. Wir werden diskutieren, wie die asynchronen Komponenten von Vue und das Routing von Lazy Loading verwendet werden können, um diese beiden Zwecke zu erreichen.

1. Asynchrone Komponenten

Vue asynchrone Komponenten laden Komponentencode nur bei Bedarf. Dies ist eine Möglichkeit, das asynchrone Laden von Komponenten zu erreichen. Die Verwendung asynchroner Komponenten ist wie folgt:

1. Definieren Sie eine asynchrone Komponente.

Wir müssen zuerst eine asynchrone Komponente definieren und in der Komponentendeklaration die Funktionen „resolve“ und „require.ensure“ verwenden, um den Komponentencode zu laden.

Vue.component('async-component', function(resolve) {
  require.ensure(['./AsyncComponent.vue'], function() {
    resolve(require('./AsyncComponent.vue'));
  });
});

Im obigen Beispiel haben wir eine asynchrone Komponente AsyncComponent definiert und require.ensure verwendet, um den Komponentencode zu laden. Die Auflösungsfunktion wird verwendet, um den Komponentencode zu empfangen und nach dem Laden des Komponentencodes auszuführen. Beachten Sie, dass die Anforderungsfunktion zurückgegeben werden muss, damit der Komponentencode erfolgreich geladen werden kann.

2. Asynchrone Komponenten verwenden

Wir können asynchrone Komponenten direkt in Vue-Vorlagen verwenden.

<template>
  <async-component></async-component>
</template>

Wo immer Sie eine asynchrone Komponente verwenden müssen, verwenden Sie einfach direkt den Komponentennamen. Der Komponentencode wird geladen und angezeigt, wenn die Komponente gerendert wird.

2. Routing-Lazy-Loading

Vue-Routing-Lazy-Loading dient dem dynamischen Laden von Komponentencode durch Routing-Konfiguration, was eine Möglichkeit ist, Komponenten bei Bedarf zu laden. Die Art und Weise, Routing-Lazy-Loading zu verwenden, ist wie folgt:

1 Definieren Sie Routing-Lazy-Loading

Wir müssen zuerst eine Route definieren und die dynamische Importmethode verwenden, um den Komponentencode zu laden.

const Foo = () => import('./Foo.vue');
const Bar = () => import('./Bar.vue');

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

Im obigen Beispiel haben wir zwei Komponenten Foo und Bar definiert und den Komponentencode über die dynamische Importmethode geladen.

2. Routing-Lazy-Loading verwenden

Wir können Routing-Lazy-Loading direkt in der Vue-Routing-Konfiguration verwenden.

import Vue from 'vue'
import Router from 'vue-router'

const Foo = () => import('./Foo.vue');
const Bar = () => import('./Bar.vue');

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/foo',
      name: 'foo',
      component: Foo
    },
    {
      path: '/bar',
      name: 'bar',
      component: Bar
    }
  ]
})

Verwenden Sie bei Routen, die ein Laden bei Bedarf erfordern, die dynamische Importmethode, um Komponentencode zu laden. Beim Zugriff auf die Route wird der Komponentencode geladen und angezeigt.

3. Zusammenfassung

Im Folgenden erfahren Sie, wie Sie mit Vue das asynchrone Laden und das Laden bei Bedarf von Komponenten implementieren. Wir können verschiedene Methoden verwenden, um Komponenten entsprechend den tatsächlichen Anforderungen zu optimieren, die Anwendungsleistung zu verbessern und die Anwendungsgröße zu reduzieren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Vue das asynchrone Laden und das Laden von Komponenten bei Bedarf implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!