Application API

Question 1

createApp()

Answer 1

Elle crée une instance d’application.

Elle prend 2 paramètres : Le root component et les props (optionel) passées au root component sous la fome d’un objet.

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

#createApp()

Question 2

createSSRApp()

Answer 2

Crée une instance d’application en mode SSR. Fonctionne de la même façon que createApp().

#createSSRApp()

Question 3

app.mount()

app étant le return de createApp() ou createSSRApp()

Answer 3

Monte l’instance d’application dans le container element mis en paramètre.

L’argument peut-être un élément ou un sélecteur CSS (C’est le 1er trouvé qui va être utilisé).

Il retourne ensuite l’instance du Root component.

interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

NB : Pour toute instance d’application, app.mount() ne peut être appelée qu’une seule fois.

#app.mount()

Question 4

app.unmount()

app étant le return de createApp() ou createSSRApp()

Answer 4

Il unmount une instance d’application montée.

NB: Il trigger le lifecycle hook unmount de tous les composants qui se trouvent dans l’arbre de l’application.

interface App {
  unmount(): void
}

#app.unmount()

Question 5

app.onUnmount()

app étant le return de createApp() ou createSSRApp()

Answer 5

Enregistre une callback qui sera appelée lorsque l’app est unmounted.

interface App {
  onUnmount(callback: () => any): void
}

Disponible qu’à partir de la version 3.5

#app.onUnmount()

Question 6

app.component()

Answer 6

• Si on passe une string et un composant en paramètre, elle enregistre un composant global (disponible dans tous les composants).
• Si on passe juste une string, elle renvoie juste le composant associé.

Lors de l’enregistrement d’un composant (1er cas), elle renvoi this, ce qui permet de chainer.

interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

#app.component()

Question 7

app.directive()

Answer 7

Comme app.component(),

• Si on passe une string et une Directive en paramètre, elle enregistre une directive global.
• Par contre, si on passe juste une string en paramètre, elle renvoie juste la directive associée.

La méthode renvoi également this.

interface App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

#app.directive()

Question 8

app.use()

Answer 8

Elle permet d’installer un plugin.

Elle prend le plugin en 1er paramètre et les options du plugin en second paramètre (ces derniers sont optionnels).

NB: le plugin peut-être un objet avec une methode install() ou juste une fonction qui fera office de install(). Les options passées en 2e argument de app.use() seront passées dans la méthode install() en 2e paramètre (app étant le premier).

´´´
const myPlugin = {
install(app, options) {
// configure the app
}
}
´´´

NB 2: Lorsque app.use() est appelée plusieurs fois avec le même plugin, le plugin n’est installée qu’une seule fois.

Il renvoie également this.

interface App {
  use(plugin: Plugin, ...options: any[]): this
}

#app.use()

Question 9

app.mixin()

Answer 9

Elle crée une mixin global.

NB: A ne pas utiliser car elles ne sont disponibles dans Vue 3 que pour maintenir la compatibilité avec les mixins beaucoup utilisées dans Vue 2.

Vaut mieux utiliser les composables, si besoin d’écrire du code réutilisable.

#app.mixin()

Question 10

app.provide()

Answer 10

Provide (met à disposition) une value qui pourra être injectée dans tous les composants enfants de l’application.

interface App {
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

Comme app.component() ou app.directive() elle renvoi this, elle peut donc être chainée.

NB: A retenir que app.provide() est un provide à l’échelle de l’application ce qui est différent du provide qu’on va trouver à l’échelle d’un composant (voir provide)

#app.provide()

Question 11

app.runWithContext()

Answer 11

Execute une callback avec l’app actuelle comme contexte d’injection (cad avec les provide de l’app)

interface App {
  runWithContext<T>(fn: () => T): T
}

En résumé, elle éxécute une fonction en ayant accès aux « provide » de l’app. C’est la returned value de la callback qui est retournée par app.runWithContext().

Exemple :

import { inject } from 'vue'

app.provide(‘message’, ‘saliou’)

const injected = app.runWithContext(() => {
  return inject(‘message’)
})

console.log(injected) // ‘saliou’

version 3.3+

#app.runWithContext()

Question 12

app.version

Answer 12

Elle retourne la version de Vue avec laquelle l’app a été créée.

´´´
interface App {
version: string
}
´´´

Cela peut être pratique pour des plugins qui ont des logiques différentes en fonction des versions de Vue.

Exemple dans un plugin :

export default {
  install(app) {
    const version = Number(app.version.split('.')[0])
    if (version < 3) {
      console.warn('This plugin requires Vue 3')
    }
  }
}

#app.version()

Question 13

app.config

Answer 13

Toutes les instances d’application app expose un objet config. Il est possible d’en modifier certaines propriétés (voir cartes suivantes) avant de le mount avec app.mount()

import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

#app.config()

Question 14

app.config.errorHandler

Answer 14

Elle permet de créer un catcher d’erreurs pour toutes les uncaught errors qui ont été trigger dans l’app.

interface AppConfig {
  errorHandler?: (
    err: unknown,

    instance: ComponentPublicInstance | null,

    // `info` is a Vue-specific error info,
    // e.g. which lifecycle hook the error was thrown in
    info: string
  ) => void
}

Ça doit être une fonction qui prend 3 paramètres, l’erreur, l’instance de composant qui a déclanché l’erreur et une string info qui indique le type de source de l’erreur.

Type de sources pris en compte :

• Component renders
• Event handlers
• Lifecycle hooks
• setup() function
• Watchers
• Custom directive hooks
• Transition hooks

Exemple :

app.config.errorHandler = (err, instance, info) => {
  // handle error, e.g. report to a service
}

NB : Par défaut l’error handler va re-throw en mode dev et juste log l’erreur en mode prod.
On peut changer ce comportement en configurant app.config.throwUnhandledErrorInProduction (boolean / 3.5+)

#app.config.errorHandler

Question 15

Quelles sont les types de sources pris en compte par app.config.errorHandler dans la propriété info ?

Answer 15

Les types de sources pris en compte dans app.config.errorHandler sont :

• Component renders
• Event handlers
• Lifecycle hooks
• setup() function
• Watchers
• Custom directive hooks
• Transition hooks

interface AppConfig {
  errorHandler?: (
    err: unknown,

    instance: ComponentPublicInstance | null,

    info: string
  ) => void
}

#app.config.errorHandler

Question 16

app.config.warnHandler

Answer 16

Elle applique un custom handler pour les warnings au runtime de Vue.

interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

Elle prend 3 paramètres : le message, l’instance et la trace qui retrace l’arbre des composants.

Elle peut être pratique pour filtrer que les warnings qui nous intéressent par exemple.

NB: Cette config ne marche qu’en mode dev. En mode prod, cette config est ignorée.

app.config.warnHandler = (msg, instance, trace) => {
  // `trace` is the component hierarchy trace
}

#app.config.warnHandler

Question 17

app.config.performance

Answer 17

C’est un boolean qui une fois mis à true, active le tracking :

• du component init
• du render
• et du patch permformance

dans l’outil performance du navigateur (performance/timeline panel).

À retenir par contre qu’elle ne marche qu’en mode dev et dans les navigateurs qui supportent l’API performance.mark.

Voir Performance en détail.

#app.config.performance

Question 18

app.config.compilerOptions

Answer 18

Permet de configurer les options du runtime compiler.
Les valeurs configurées dans cette option seront passées dans le browser template compiler et affecteront tous les composants de l’app.

NB: Il et possible d’overrider ces options à l’échelle d’un composant en utilisant l’option compilerOptions (disponible dans l’Option API).

#app.config.compilerOptions

Question 19

app.config.compilerOptions.isCustomElement

Dans compilerOptions

Answer 19

Elle permet de mettre en place une méthode pour reconnaître les native custom elements.

(tag: string) => boolean

Elle doit return true si le tag doit être traité comme un native custom element. Vue le “rendera” en native element au lieu d’essayer de le render en Vue component.

NB: Les tags HTML et SVG n’ont pas besoin d’être pris en compte dans cette fonction. Le parser de Vue les reconnais déjà automatiquement.

#app.config.compilerOptions.isCustomElement

Question 20

app.config.compilerOptions.whitespace

Answer 20

Elle permet d’ajuster comment les espaces blancs du template sont géres lors de la compilation.

ˋ`ˋ
Type: ‘condense’ | ‘preserve’

Default: ‘condense’
ˋ`ˋ
Elle a deux valeurs possibles, condense ou preserve.

Vue garde ou condense les espaces blancs pour optimiser le compiled output.

Par défaut, elle condense avec le comportement suivant :

1. Leading / ending whitespaces à l’interieur d’un élément sont condensés en un seul espace.
2. Les espaces blancs entre les éléments qui contiennent de nouvelles lignes sont supprimés.
3. Les espaces blancs consécutifs dans les noeuds de texte seront mergés en un seul espace.

En mettant l’option à preserve, le 2 et 3 sont ignorés.

#app.config.compilerOptions.whitespace

Question 21

app.config.compilerOptions.delimiters

Answer 21

Elle permet de définir les délimiters utilisés pour l’interpolation de texte dans le template.

Type: [string, string]
Default: ['{{', '}}']

Par défaut on aura

<p> hey {{ name }} </p>

On l’utilise typiquement pour éviter des conflits avec les frameworks Server Side qui utilisent également la mustach synthax.

Exemple

app.config.compilerOptions.delimiters = ['${', '}']

#app.config.compilerOptions.delimiters

Question 22

app.config.compilerOptions.comments

Answer 22

Elle permet d’indiquer si les commentaires HTML du template doivent être conservés ou non en production.

ˋ
Type: boolean
Default: false
ˋ
Par défaut Vue retire les commentaires en production (value = false).

Le mettre à true forcera Vue à conséver les commentaires HTML même en production.

Cela est pratique lorsque Vue est utilisée avec une librairie qui fonctionne à l’aide des commentaires HTML.

#app.config.compilerOptions.comments

Question 23

app.config.globalProperties

Answer 23

C’est un objet qui permet de set des propriétés qui seront disponibles dans toutes les instances de composants du template.

ˋ

interface AppConfig {
globalProperties: Record<string, any>
}
ˋ`ˋ

Il a été mis en place pour remplacer Vue.prototype de Vue 2 (plus disponible dans Vue 3).

Étant une global value, à utiliser avec parcimonie.

NB: Si une global property rentre en conflit avec une local property d’un composant, c’est la property du composant qu’aura la priorité.

Exemple :
ˋˋ app.config.globalProperties.msg = 'hello' ˋˋ

msg sera disponible dans les templates et dans le this de chaque instance de composant.

Voir guide Global Property

#app.config.globalProperties