Explication détaillée de la fonction app.mount() de Vue3

Vue3 全局 APIVue3 API globale

Dans Vue3,app.mount()Son objectif est de monter l'application Vue sur l'élément DOM.

1. Structure de base d'une application Vue3

Dans Vue3, nous devons d'abord créer une instance d'application Vue. Habituellement, nous pouvons utilisercreateApp()fonction pour créer une instance d'application :

Exemple

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

const app = createApp(App);

Dans cet exemple,createApp()La fonction prend un composant racineAppcomme paramètre et renvoie une instance d'applicationappEnsuite, nous devons monter cette instance d'application sur un élément DOM.

2. Rôle de la fonction app.mount()

app.mount()Le but de cette fonction est de monter l'instance d'application Vue sur un élément DOM spécifié. Sa syntaxe est la suivante :

Exemple

app.mount(selector);

Où,selectorest une chaîne qui représente le sélecteur de l'élément DOM cible. Vue trouvera le premier élément correspondant au sélecteur et montera l'instance d'application sur cet élément.

2.1 Utilisation de base

Supposons que notre fichier HTML contienne undivélément, dontidestapp：

Exemple

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

Nous pouvons utiliser le code suivant pour monter l'application Vue sur celui-cidivélément :

Exemple

app.mount('#app');

Ce code va trouver l'idestappdedivélément, et monter l'instance d'application Vue sur cet élément. Après le montage, Vue commencera à rendre le composant racineAppet insérer son contenu dans ledivélément.

2.2 Remarques

  • Unicité du sélecteur：app.mount()La fonction ne montera que sur le premier élément correspondant au sélecteur. S'il y a plusieurs éléments correspondants sur la page, Vue ne montera que sur le premier.

  • Moment du montage：app.mount()La fonction doit être appelée après que le DOM a fini de charger pour garantir que l'élément cible existe déjà. Habituellement, nous allonswindow.onloadouDOMContentLoadedl'appeler dans l'événement.app.mount()。

3. Scénarios d'application pratiques

3.1 Montage dynamique

Dans certains cas, nous pouvons avoir besoin de déterminer dynamiquement le point de montage. Par exemple, nous pouvons avoir besoin de monter l'application sur différents éléments DOM sur différentes pages ou dans différentes conditions. Dans ce cas, nous pouvons passer dynamiquement un sélecteur àapp.mount()：

Exemple

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

3.2 Montage différé

Parfois, nous pouvons vouloir monter l'application uniquement à un moment précis. Par exemple, attendre que certaines opérations asynchrones soient terminées avant de monter l'application. À ce stade, nous pouvons appelerapp.mount()：

Exemple

setTimeout(() => {
  app.mount('#app');
}, 3000); // Monter l'application après 3 secondes

Vue3 全局 APIVue3 API globale

Autres extensions