Vue3 API globale

L'API globale de Vue3 est la suivante :

Non. API et description Exemple
1 createApp()
Crée une instance d'application Vue, généralement utilisée pour le rendu côté client.		 const app = createApp(App)
2 createSSRApp()
Crée une instance d'application Vue pour le rendu côté serveur (SSR).		 const app = createSSRApp(App)
3 app.mount()
Monte l'instance d'application Vue sur l'élément DOM spécifié.		 app.mount('#app')
4 app.unmount()
Démonte l'instance d'application Vue.		 app.unmount()
5 app.onUnmount()
Enregistre une fonction de rappel pour le moment où l'application est démontée.		 app.onUnmount(() => { console.log('App is being unmounted') })
6 app.component()
Enregistre un composant global, rendant le composant utilisable partout.		 app.component('MyComponent', MyComponent)
7 app.directive()
Enregistre une directive globale, permettant la création de directives personnalisées.		 app.directive('focus', { mounted(el) { el.focus() } })
8 app.use()
Installe un plugin, qui peut fournir des fonctionnalités supplémentaires à l'application.		 app.use(SomePlugin)
9 app.mixin()
Enregistre un mixin global, fournissant des données ou des méthodes partagées à tous les composants.		 app.mixin({ methods: { globalMethod() { ... } } })
10 app.provide()
Fournit des dépendances à l'ensemble de l'application, partageant des données entre les composants.		 app.provide('key', 'some value')
11 app.runWithContext()
Exécute une fonction dans le contexte de l'application Vue, permettant d'accéder aux données du contexte.		 app.runWithContext(() => { console.log('Running inside app context') })
12 app.version
Obtient le numéro de version actuel de Vue.		 console.log(app.version)
13 app.config
Obtenir et définir la configuration globale de l'instance d'application.		 app.config.globalProperties.$myProperty = 'value'
14 app.config.errorHandler
Définir une fonction de gestionnaire d'erreurs global, déclenchée lorsqu'une erreur non interceptée se produit dans l'application.		 app.config.errorHandler = (err, vm, info) => { console.error(err) }
15 app.config.warnHandler
Définir une fonction de gestionnaire d'avertissements globale pour gérer les messages d'avertissement dans l'application.		 app.config.warnHandler = (msg, vm, trace) => { console.warn(msg) }
16 app.config.performance
Activer la surveillance des performances pour fournir des données de performance de rendu.		 app.config.performance = true
17 app.config.compilerOptions
Configurer les options du compilateur de templates, en contrôlant le comportement de la compilation des templates.		 app.config.compilerOptions.delimiters = ['[[', ']]']
18 app.config.globalProperties
Définir des propriétés globales, accessibles par tous les composants de l'application.		 app.config.globalProperties.$myGlobalProperty = 'value'
19 app.config.optionMergeStrategies
Définir des stratégies de fusion des options de composant, en contrôlant la façon dont les options des composants sont fusionnées.		 app.config.optionMergeStrategies.methods = (parent, child) => { return { ...parent, ...child } }
20 app.config.idPrefix
Définir le préfixe des ID d'instance Vue, par défaut "vue-".		 `app.config.idPrefix = 'myApp-'
21 app.config.throwUnhandledErrorInProduction
Contrôler si les erreurs non gérées sont levées dans l'environnement de production.		 app.config.throwUnhandledErrorInProduction = false
22 version
Obtient le numéro de version actuel de Vue.		 console.log(Vue.version)
23 nextTick()
Exécuter un rappel différé après la fin de la mise à jour du DOM, utilisé pour gérer les mises à jour asynchrones du DOM.		 nextTick(() => { console.log('DOM updated') })
24 defineComponent()
Utilisé pour définir des composants, offrant une inférence de type et une syntaxe plus simple.		 export default defineComponent({ name: 'MyComponent' })
25 defineAsyncComponent()
Définir des composants asynchrones, qui sont chargés à la demande lorsque nécessaire.		 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

API d'instance d'application

1. createApp()

  • Description: Créer une instance d'application Vue.

  • Utilisation: createApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Composant racine.

    • rootProps(Facultatif): Props transmises au composant racine.

Exemple

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

const app = createApp(App);

2. createSSRApp()

  • Description: Créer une instance d'application Vue prenant en charge le rendu côté serveur (SSR).

  • Utilisation: createSSRApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Composant racine.

    • rootProps(Facultatif): Props transmises au composant racine.

Exemple

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

const app = createSSRApp(App);

3. app.mount()

  • Description: Monter l'application sur un élément DOM.

  • Utilisation: app.mount(container)

  • Parameters:

    • container: Élément DOM ou chaîne de sélecteur.

Exemple

app.mount('#app');

4. app.unmount()

  • Description: Démonter l'instance d'application.

  • Utilisation: app.unmount()

Exemple

app.unmount();

5. app.onUnmount()

  • Description: Enregistrer une fonction de rappel à appeler lorsque l'application est démontée.

  • Utilisation: app.onUnmount(callback)

  • Parameters:

    • callback: La fonction appelée lors du démontage.

Exemple

app.onUnmount(() => {
  console.log('App démontée');
});

6. app.component()

  • Description: Enregistrer ou récupérer un composant global.

  • Utilisation:

    • Enregistrer:app.component(name, component)

    • Récupérer:app.component(name)

  • Parameters:

    • name: Nom du composant.

    • component: Définition du composant.

Exemple

app.component('MyComponent', {
  template: '<div>Mon composant</div>'
});

7. app.directive()

  • Description: Enregistrer ou récupérer une directive globale.

  • Utilisation:

    • Enregistrer:app.directive(name, directive)

    • Récupérer:app.directive(name)

  • Parameters:

    • name: Nom de la directive.

    • directive: Définition de la directive.

Exemple

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

8. app.use()

  • Description: Installer un plugin.

  • Utilisation: app.use(plugin, options)

  • Parameters:

    • plugin: Plugin.

    • options(Facultatif): Options du plugin.

Exemple

import MyPlugin from './MyPlugin';
app.use(MyPlugin);

9. app.mixin()

  • Description: Options du mixin global.

  • Utilisation: app.mixin(mixin)

  • Parameters:

    • mixin: Objet mixin.

Exemple

app.mixin({
  created() {
    console.log('Mixin global créé');
  }
});

10. app.provide()

  • Description: Fournir des dépendances globales.

  • Utilisation: app.provide(key, value)

  • Parameters:

    • key: Nom de la dépendance.

    • value: Valeur de la dépendance.

Exemple

app.provide('theme', 'dark');

11. app.runWithContext()

  • Description: Exécuter une fonction dans le contexte de l'application actuelle.

  • Utilisation: app.runWithContext(fn)

  • Parameters:

    • fn: La fonction à exécuter.

Exemple

app.runWithContext(() => {
  console.log('Exécution avec le contexte de l'application');
});

12. app.version

  • Description: Obtenir la version de Vue.

  • Utilisation: app.version

Exemple

console.log(app.version);

13. app.config

  • Description: Objet de configuration de l'application.

  • Utilisation: app.config

Exemple

app.config.errorHandler = (err) => {
  console.error(err);
};

14. app.config.errorHandler

  • Description: Fonction de gestion globale des erreurs.

  • Utilisation: app.config.errorHandler = (err, vm, info) => {}

  • Parameters:

    • err: Objet d'erreur.

    • vm: L'instance du composant où l'erreur s'est produite.

    • info: Message d'erreur.

Exemple

app.config.errorHandler = (err) => {
  console.error('Erreur globale :', err);
};

15. app.config.warnHandler

  • Description: Fonction de gestion globale des avertissements.

  • Utilisation: app.config.warnHandler = (msg, vm, trace) => {}

  • Parameters:

    • msg: Message d'avertissement.

    • vm: L'instance du composant où l'avertissement s'est produit.

    • trace: Pile d'avertissements.

Exemple

app.config.warnHandler = (msg) => {
  console.warn('Avertissement global :', msg);
};

16. app.config.performance

  • Description: Activer le suivi des performances.

  • Utilisation: app.config.performance = true

Exemple

app.config.performance = true;

17. app.config.compilerOptions

  • Description: Configurer les options du compilateur de templates.

  • Utilisation: app.config.compilerOptions = { /* options */ }

Exemple

app.config.compilerOptions = { whitespace: 'preserve' };

18. app.config.globalProperties

  • Description: Ajouter des propriétés globales.

  • Utilisation: app.config.globalProperties[key] = value

Exemple

app.config.globalProperties.$myGlobal = 'Bonjour';

19. app.config.optionMergeStrategies

  • Description: Stratégie personnalisée de fusion des options.

  • Utilisation: app.config.optionMergeStrategies[key] = strategy

Exemple

app.config.optionMergeStrategies.customOption = (parent, child) => {
  return child || parent;
};

20. app.config.idPrefix

  • Description: Définir le préfixe d'ID du composant.

  • Utilisation: app.config.idPrefix = 'my-app-'

Exemple

app.config.idPrefix = 'my-app-';

21. app.config.throwUnhandledErrorInProduction

  • Description: Lever les erreurs non gérées dans l'environnement de production.

  • Utilisation: app.config.throwUnhandledErrorInProduction = true

Exemple

app.config.throwUnhandledErrorInProduction = true;

API générale

1. version

  • Description: Obtenir la version de Vue.

  • Utilisation: Vue.version

Exemple

console.log(Vue.version);

2. nextTick()

  • Description: Exécuter une fonction de rappel après la fin du prochain cycle de mise à jour du DOM.

  • Utilisation: nextTick(callback)

  • Parameters:

    • callback: Fonction de rappel.

Exemple

import { nextTick } from 'vue';
nextTick(() => {
  console.log('DOM updated');
});

3. defineComponent()

  • Description: Définir un composant.

  • Utilisation: defineComponent(options)

  • Parameters:

    • options: Options du composant.

Exemple

import { defineComponent } from 'vue';
const MyComponent = defineComponent({
  template: '<div>Mon composant</div>'
});

4. defineAsyncComponent()

  • Description: Définir un composant asynchrone.

  • Utilisation: defineAsyncComponent(loader)

  • Parameters:

    • loader: Fonction de chargement asynchrone.

Exemple

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
);
Autres extensions