Vue3 app.mount()-Funktion detailliert erklärt

Vue3 全局 APIVue3 Global API

In Vue3,app.mount()Sein Zweck ist es, die Vue-Anwendung an das DOM-Element zu mounten.

1. Grundstruktur einer Vue3-Anwendung

In Vue3 müssen wir zuerst eine Vue-Anwendungsinstanz erstellen. Normalerweise können wircreateApp()Funktion zum Erstellen einer Anwendungsinstanz:

Beispiel

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

const app = createApp(App);

In diesem Beispiel,createApp()Die Funktion nimmt eine Root-KomponenteAppals Parameter entgegen und gibt eine Anwendungsinstanz zurückappAls Nächstes müssen wir diese Anwendungsinstanz auf ein DOM-Element mounten.

2. Zweck der Funktion app.mount()

app.mount()Der Zweck dieser Funktion besteht darin, die Vue-Anwendungsinstanz auf ein angegebenes DOM-Element zu mounten. Ihre Syntax lautet wie folgt:

Beispiel

app.mount(selector);

Wobei,selectorist ein String, der den Selektor des Ziel-DOM-Elements darstellt. Vue findet das erste Element, das dem Selektor entspricht, und mountet die Anwendungsinstanz auf dieses Element.

2.1 Grundlegende Verwendung

Angenommen, unsere HTML-Datei enthält eindivElement, dessenidistapp：

Beispiel

<div id="app"></div>

Wir können den folgenden Code verwenden, um die Vue-Anwendung auf diesesdivElement:

Beispiel

app.mount('#app');

Dieser Code findet dasidistappvondivElement und mountet die Vue-Anwendungsinstanz auf dieses Element. Nach dem Mounten beginnt Vue mit dem Rendern der Root-KomponenteAppund fügt ihren Inhalt in dasdivElement.

2.2 Hinweise

  • Eindeutigkeit des Selektors：app.mount()Die Funktion mountet nur an das erste Element, das dem Selektor entspricht. Wenn mehrere passende Elemente auf der Seite vorhanden sind, mountet Vue nur an das erste.

  • Zeitpunkt des Mountens：app.mount()Die Funktion sollte aufgerufen werden, nachdem das DOM vollständig geladen wurde, um sicherzustellen, dass das Zielelement bereits existiert. Normalerweise werden wirwindow.onloadoderDOMContentLoadedsie im Event aufrufen.app.mount()。

3. Praktische Anwendungsszenarien

3.1 Dynamisches Mounten

In manchen Fällen müssen wir den Mount-Punkt möglicherweise dynamisch bestimmen. Zum Beispiel müssen wir die Anwendung möglicherweise an verschiedene DOM-Elemente auf verschiedenen Seiten oder unter verschiedenen Bedingungen mounten. In diesem Fall können wir dynamisch einen Selektor anapp.mount()：

Beispiel

const mountElement = condition ? '#app1' : '#app2';
app.mount(mountElement);

3.2 Verzögertes Mounten

Manchmal möchten wir die Anwendung nur zu einem bestimmten Zeitpunkt mounten. Warten Sie beispielsweise, bis einige asynchrone Vorgänge abgeschlossen sind, bevor Sie die Anwendung mounten. An dieser Stelle können wir aufrufenapp.mount()：

Beispiel

setTimeout(() => {
  app.mount('#app');
}, 3000); // Die Anwendung nach 3 Sekunden mounten

Vue3 全局 APIVue3 Global API

Andere Erweiterungen