Vue3 createApp()Fonction

Vue3 全局 APIVue3 API globale

Dans Vue3,createApp()est une fonction globale utilisée pour créer une nouvelle instance d'application Vue.

createApp()est le point de départ d'une application Vue. Tous les composants, plugins, routes, etc. doivent être enregistrés et configurés via cette instance.

ViacreateApp(), vous pouvez facilement créer, configurer et gérer des applications Vue et les monter sur des éléments DOM de la page.

Contrairement à ce qui se fait dans Vue2new Vue(), Vue3 introduitcreateApp()pour créer des instances d'application, ce qui rend l'API de Vue plus modulaire et flexible.

La syntaxe de la fonction est la suivante :

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

Le premier paramètre est le composant racine. Le deuxième paramètre est facultatif ; il s'agit des props à transmettre au composant racine.

createApp()Utilisation de base

Pour utilisercreateApp(), vous devez d'abord l'importer depuis la bibliothèque Vue. Voici un exemple simple :

Exemple

// Importer la fonction createApp depuis la bibliothèque Vue
import { createApp } from 'vue';

// Créer un composant racine
const App = {
  template: `<h1>Hello, Vue3!</h1>`
};

// Utiliser createApp pour créer une instance d'application et la monter sur un élément DOM
const app = createApp(App);
app.mount('#app');

Dans cet exemple, nous avons d'abordvueimporté depuis la bibliothèquecreateAppla fonction. Ensuite, nous avons défini un composant racine simpleApp, qui affiche simplement un titre sur la page. Ensuite, nous utilisonscreateApp(App)pour créer une instance d'application Vue et la monter sur l'élément DOM avec l'IDappsur la page.

createApp()Valeur de retour

createApp()La fonction renvoie un objet d'instance d'application, qui fournit de nombreuses méthodes et propriétés pour configurer et gérer l'application Vue.

Par exemple, vous pouvez utiliser la.mount()méthode pour monter l'application sur un élément DOM, ou utiliser la.use()méthode pour installer des plugins :

Exemple

const app = createApp(App);

// Installer le plugin Vue Router
app.use(router);

// Monter l'application
app.mount('#app');

Pourquoi utilisercreateApp()？

createApp()Dans Vue3, elle remplace celle de Vue2new Vue(), principalement pour les raisons suivantes :

  • Conception modulaire：createApp()rend l'API de Vue plus modulaire, permettant aux développeurs d'importer et d'utiliser différentes fonctionnalités à la demande.
  • Meilleure isolation: Chaque instance d'application est indépendante, évitant la pollution globale entre plusieurs applications.
  • Configuration plus flexible：createApp()L'objet d'instance d'application retourné fournit plus de méthodes et d'options, rendant la configuration et la gestion de l'application plus flexibles.

Application dans des projets réels

Dans des projets réels,createApp()il est généralement utilisé pour créer l'instance principale de l'application et enregistrer les composants globaux, les plugins, les routes, etc.

Voici un exemple plus complexe :

Exemple

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

const app = createApp(App);

// Utiliser le routeur
app.use(router);

// Utiliser la gestion d'état
app.use(store);

// Enregistrer un composant global
app.component('MyComponent', MyComponent);

// Monter l'application
app.mount('#app');

Dans cet exemple, nous créons une instance d'application Vue, installons tour à tour le plugin routeur et le plugin de gestion d'état, et enregistrons un composant global. Enfin, nous montons l'application sur le#appélément de la page.

Vue3 全局 APIVue3 API globale

Autres extensions