Grundlagen der VUE3-Entwicklung: Tutorial zur Verwendung asynchroner Komponenten

Vue 3 ist die neueste Hauptversion von Vue.js, mit vielen neuen Funktionen und Verbesserungen im Vergleich zu Vue 2. Eine der herausragendsten Verbesserungen ist die Verwendung asynchroner Komponenten. In diesem Artikel befassen wir uns mit der Verwendung und den Techniken asynchroner Komponenten in Vue 3.

Was sind asynchrone Komponenten?

In Vue können Komponenten über die Importanweisung oder die Require-Funktion eingeführt werden. Diese Komponenten werden als synchrone Komponenten bezeichnet und ihr Code wird sofort beim Start der Anwendung geladen und kompiliert. Wenn Apps jedoch größer werden, können synchron geladene Komponenten zu längeren Ladezeiten auf dem ersten Bildschirm führen und sogar große Mengen an Speicher und Bandbreite verbrauchen.

Um dieses Problem zu lösen, bietet Vue 3 das Konzept asynchroner Komponenten. Asynchrone Komponenten sind Komponenten, die bei Bedarf geladen und kompiliert werden. Das bedeutet, dass die Anwendung, wenn sie bestimmte Komponenten laden muss, diese Komponenten asynchron vom Server anfordert und sie dynamisch lädt und kompiliert, nachdem die Antwort zurückkommt. Dies kann die Ladezeiten des ersten Bildschirms erheblich verkürzen und den Speicherbedarf und Bandbreitenverbrauch der Anwendung reduzieren.

Wie verwende ich asynchrone Komponenten?

In Vue 3 können asynchrone Komponenten auf folgende Weise definiert werden:

const AsyncComponent = defineAsyncComponent(async () => {
  // 异步加载和编译组件的代码
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

Der obige Code definiert eine asynchrone Komponente mit dem Namen AsyncComponent. Die Art und Weise, asynchrone Komponenten zu definieren, ähnelt der von synchronen Komponenten, mit der Ausnahme, dass asynchrone Komponenten die Funktion defineAsyncComponent anstelle der Funktion defineComponent verwenden müssen. AsyncComponent的异步组件。定义异步组件的方式与同步组件类似，只不过异步组件需要使用defineAsyncComponent函数而不是defineComponent函数。

在异步组件的定义中，我们通过async和await关键字异步加载和编译组件的代码。在这个例子中，我们使用import语句从@/components/AsyncComponent.vue文件中加载组件，并返回它的默认导出。需要注意的是，在异步组件的定义中，我们只需要返回组件的默认导出即可，不要返回Vue实例或组件选项。

一旦我们定义了异步组件，我们就可以在父组件中使用它了。例如，如果我们想在App.vue组件中使用上面定义的异步组件，我们可以这样做：

<template>
  <div>
    <h1>异步组件</h1>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue"
const AsyncComponent = defineAsyncComponent(async () => {
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

export default {
  components: {
    AsyncComponent
  }
}
</script>

上面的代码中，在components选项中注册了异步组件AsyncComponent。然后在模板中使用78bf8e3d1471d68fca878c5a3db3c106标记，就可以显示异步组件了。

当父组件被渲染时，Vue 3会检测到78bf8e3d1471d68fca878c5a3db3c106标记，然后从服务器异步请求我们定义的异步组件。一旦异步响应返回，Vue将动态加载和编译组件，并将其显示在页面上。

除了上面的方式，我们还可以使用Vue 3提供的defineAsyncComponent函数的其他方式来定义异步组件。例如，我们可以使用动态导入和defineAsyncComponent

Bei der Definition einer asynchronen Komponente verwenden wir die Schlüsselwörter async und await, um den Code der Komponente asynchron zu laden und zu kompilieren. In diesem Beispiel verwenden wir die Anweisung import, um die Komponente aus der Datei @/components/AsyncComponent.vue zu laden und ihren Standardexport zurückzugeben. Es ist zu beachten, dass wir bei der Definition einer asynchronen Komponente nur den Standardexport der Komponente zurückgeben müssen, nicht die Vue-Instanz- oder Komponentenoptionen.

Sobald wir die asynchrone Komponente definiert haben, können wir sie in der übergeordneten Komponente verwenden. Wenn wir beispielsweise die oben definierte asynchrone Komponente in der App.vue-Komponente verwenden möchten, können wir Folgendes tun:

const AsyncComponent = defineAsyncComponent(() => import("@/components/AsyncComponent.vue"))

Registrieren Sie sich im obigen Code in den components Option Die asynchrone Komponente AsyncComponent wurde installiert. Verwenden Sie dann das Tag 78bf8e3d1471d68fca878c5a3db3c106 in der Vorlage, um die asynchrone Komponente anzuzeigen.

Wenn die übergeordnete Komponente gerendert wird, erkennt Vue 3 das Tag 78bf8e3d1471d68fca878c5a3db3c106 und fordert dann asynchron die von uns definierte asynchrone Komponente vom Server an. Sobald die asynchrone Antwort zurückkommt, lädt Vue die Komponente dynamisch, kompiliert sie und zeigt sie auf der Seite an.

Zusätzlich zur oben genannten Methode können wir auch andere Methoden verwenden, um asynchrone Komponenten mithilfe der von Vue 3 bereitgestellten Funktion defineAsyncComponent zu definieren. Beispielsweise können wir eine Kombination aus dynamischem Import und der Funktion defineAsyncComponent verwenden, um eine asynchrone Komponente zu definieren: 🎜

const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      import("@/components/AsyncComponent.vue").then(module => {
        resolve(module.default)
      })
    }, 1000)
  })
)

🎜 Wir können auch die traditionelle Promise-Syntax verwenden, um eine asynchrone Komponente zu definieren: 🎜rrreee🎜Oben Code verwenden wir A Promise mit einer Verzögerung von 1 Sekunde, das das asynchrone Laden und Kompilieren von Komponenten simuliert. 🎜🎜Fazit🎜🎜Asynchrone Komponenten sind eine leistungsstarke und nützliche Funktion in Vue 3. Durch den Einsatz asynchroner Komponenten können wir die Leistung und Benutzererfahrung unserer Anwendungen deutlich verbessern. In diesem Artikel befassen wir uns eingehend mit der Verwendung und den Techniken asynchroner Komponenten in Vue 3. Ich hoffe, dieser Artikel kann Ihnen helfen, die asynchronen Komponenten von Vue 3 zu verstehen und zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonGrundlagen der VUE3-Entwicklung: Tutorial zur Verwendung asynchroner Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!