Vue3 createApp()Funktion

Vue3 全局 APIVue3 Global API

In Vue3,createApp()ist eine globale Funktion, die verwendet wird, um eine neue Vue-Anwendungsinstanz zu erstellen.

createApp()ist der Ausgangspunkt einer Vue-Anwendung. Alle Komponenten, Plugins, Routen usw. müssen über diese Instanz registriert und konfiguriert werden.

DurchcreateApp(), können Sie ganz einfach Vue-Anwendungen erstellen, konfigurieren und verwalten und sie an DOM-Elemente auf der Seite mounten.

Im Gegensatz zu Vue2new Vue(), Vue3 führt eincreateApp()um Anwendungsinstanzen zu erstellen, was die API von Vue modularer und flexibler macht.

Die Funktionssyntax ist wie folgt:

function createApp(rootComponent: Component, rootProps?: object): App

Der erste Parameter ist die Root-Komponente. Der zweite Parameter ist optional; er enthält die Props, die an die Root-Komponente übergeben werden.

createApp()Grundlegende Verwendung

UmcreateApp(), müssen Sie es zuerst aus der Vue-Bibliothek importieren. Hier ist ein einfaches Beispiel:

Beispiel

// Importieren Sie die createApp-Funktion aus der Vue-Bibliothek
import { createApp } from 'vue';

// Erstellen Sie eine Root-Komponente
const App = {
  template: `<h1>Hallo, Vue3!</h1>`
};

// Verwenden Sie createApp, um eine Anwendungsinstanz zu erstellen und sie an ein DOM-Element zu mounten
const app = createApp(App);
app.mount('#app');

In diesem Beispiel haben wir zuerstvueaus der Bibliothek importiertcreateAppdie Funktion. Dann haben wir eine einfache Root-Komponente definiertApp, die einfach einen Titel auf der Seite anzeigt. Als Nächstes verwenden wircreateApp(App), um eine Vue-Anwendungsinstanz zu erstellen und sie an das DOM-Element mit der ID zu mountenappauf der Seite.

createApp()Rückgabewert

createApp()Die Funktion gibt ein Objekt einer Anwendungsinstanz zurück, das viele Methoden und Eigenschaften zum Konfigurieren und Verwalten der Vue-Anwendung bereitstellt.

Zum Beispiel können Sie die.mount()Methode verwenden, um die Anwendung an ein DOM-Element zu mounten, oder die.use()Methode zum Installieren von Plugins:

Beispiel

const app = createApp(App);

// Vue-Router-Plugin installieren
app.use(router);

// Die Anwendung mounten
app.mount('#app');

Warum verwendencreateApp()？

createApp()In Vue3 ersetzt es das in Vue2new Vue(), hauptsächlich aus folgenden Gründen:

  • Modulares Design：createApp()macht die API von Vue modularer und ermöglicht Entwicklern, verschiedene Funktionen bei Bedarf zu importieren und zu verwenden.
  • Bessere Isolierung: Jede Anwendungsinstanz ist unabhängig, wodurch globale Verschmutzung zwischen mehreren Anwendungen vermieden wird.
  • Flexiblere Konfiguration：createApp()Das zurückgegebene Anwendungsinstanzobjekt bietet mehr Methoden und Optionen, was die Konfiguration und Verwaltung der Anwendung flexibler macht.

Anwendung in realen Projekten

In realen ProjektencreateApp()wird es normalerweise verwendet, um die Hauptinstanz der Anwendung zu erstellen und globale Komponenten, Plugins, Routen usw. zu registrieren.

Hier ist ein komplexeres Beispiel:

Beispiel

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

// Router verwenden
app.use(router);

// State-Management verwenden
app.use(store);

// Globale Komponente registrieren
app.component('MyComponent', MyComponent);

// Die Anwendung mounten
app.mount('#app');

In diesem Beispiel erstellen wir eine Vue-Anwendungsinstanz, installieren nacheinander das Router-Plugin und das State-Management-Plugin und registrieren eine globale Komponente. Schließlich mounten wir die Anwendung an die#appElement auf der Seite zu mounten.

Vue3 全局 APIVue3 Global API

Weitere Erweiterungen