API Globale : Générale

version

Expose la version actuelle de Vue.

Type : string

Exemple

import { version } from 'vue'

console.log(version)

nextTick()

Un outil pour attendre la prochaine mise à jour du DOM.

Type :

function nextTick(callback?: () => void): Promise<void>

Détails
Lorsque vous modifiez un état réactif dans Vue, les mises à jour du DOM qui en résultent ne sont pas appliquées de manière synchrone. Au lieu de cela, Vue les met en mémoire tampon jusqu'au "next tick" afin de garantir que chaque composant ne soit mis à jour qu'une seule fois, quel que soit le nombre de modifications d'état que vous avez effectuées.
nextTick() peut être utilisé immédiatement après un changement d'état pour attendre que les mises à jour du DOM soient terminées. Vous pouvez soit passer une fonction de rappel comme argument, soit attendre la promesse retournée.

Exemple

vue

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM pas encore mis à jour
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // DOM désormais mis à jour
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

vue

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM pas encore mis à jour
      console.log(document.getElementById('counter').textContent) // 0

      await nextTick()
      // DOM désormais mis à jour
      console.log(document.getElementById('counter').textContent) // 1
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

Voir aussi this.$nextTick()

defineComponent()

Un utilitaire de type pour définir un composant Vue avec l'inférence de type.

Type :

// options syntax
function defineComponent(
  component: ComponentOptions
): ComponentConstructor

// function syntax (requires 3.3+)
function defineComponent(
  setup: ComponentOptions['setup'],
  extraOptions?: ComponentOptions
): () => any

Le type est simplifié dans un souci de lisibilité.

Détails
Le premier argument attend un objet d'options de composant. La valeur retournée sera le même objet d'options, puisque la fonction est essentiellement sans opération à l'exécution pour seulement apporter l'inférence de type.
Notez que le type retourné est un peu spécial : il s'agit d'un type constructeur dont le type d'instance est le type d'instance du composant déduit en fonction des options. C'est utilisé pour l'inférence de type lorsque le type retourné est utilisé comme balise dans du TSX.
Vous pouvez extraire le type d'instance d'un composant (équivalent au type de this dans ses options) à partir du type retourné par defineComponent() de cette façon :
ts
```
const Foo = defineComponent(/* ... */)

type FooInstance = InstanceType<typeof Foo>
```
Signature de fonction
- Supporté à partir de la version 3.3
defineComponent() possède également une signature alternative destinée à être utilisée avec la Composition API et les fonctions de rendu ou du JSX.
Au lieu de passer un objet d'options, une fonction est attendue à la place. Cette fonction fonctionne de la même manière que la fonction setup() de la Composition API : elle reçoit les props et le contexte général. La valeur de retour doit être une fonction de rendu - h() et JSX sont supportés :
js
```
import { ref, h } from 'vue'

const Comp = defineComponent(
  (props) => {
    // utilisez ici la Composition API comme dans <script setup>
    const count = ref(0)

    return () => {
      // fonction de rendu ou JSX
      return h('div', count.value)
    }
  },
  // options supplémentaires, comme la déclaration des props ou l'émission d'événements
  {
    props: {
      /* ... */
    }
  }
)
```
Le cas principal d'utilisation de cette signature est lors de l'utilisation de TypeScript (et en particulier avec TSX), car elle prend en charge les génériques :
tsx
```
const Comp = defineComponent(
  <T extends string | number>(props: { msg: T; list: T[] }) => {
    // utilisez ici la Composition API comme dans <script setup>
    const count = ref(0)

    return () => {
      // fonction de rendu ou JSX
      return <div>{count.value}</div>
    }
  },
  // la déclaration manuelle des props au moment de l'exécution est encore toutefois nécessaire.
  {
    props: ['msg', 'list']
  }
)
```
Dans le futur, nous prévoyons de fournir un plugin Babel qui infère et injecte automatiquement les props d'exécution (comme pour defineProps dans les SFCs) afin que la déclaration des props d'exécution puisse être omise.
Note sur le treeshaking de webpack
Étant donné que defineComponent() est un appel de fonction, on pourrait attendre qu'il produise des effets de bord pour certains outils de build, par exemple webpack. Cela empêchera le composant d'être retiré de l'arbre même s'il n'est jamais utilisé.
Pour indiquer à webpack que cet appel de fonction peut être retirée en toute tranquillité, vous pouvez ajouter un commentaire /*#__PURE__*/ avant l'appel de fonction :
js
```
export default /*#__PURE__*/ defineComponent(/* ... */)
```
Notez que cela n'est pas nécessaire si vous utilisez Vite, car Rollup (le bundler de production sous-jacent utilisé par Vite) est suffisamment intelligent pour déterminer que defineComponent() est en fait exempte d'effet de bord sans avoir besoin d'annotations manuelles.
Voir aussi Guide - Utiliser Vue avec TypeScript

defineAsyncComponent()

Définit un composant asynchrone qui est chargé de manière paresseuse uniquement lors de son rendu. L'argument peut être au choix une fonction de chargement, ou bien un objet d'options pour un contrôle plus avancé du comportement de chargement.

Type :

function defineAsyncComponent(
  source: AsyncComponentLoader | AsyncComponentOptions
): Component

type AsyncComponentLoader = () => Promise<Component>

interface AsyncComponentOptions {
  loader: AsyncComponentLoader
  loadingComponent?: Component
  errorComponent?: Component
  delay?: number
  timeout?: number
  suspensible?: boolean
  onError?: (
    error: Error,
    retry: () => void,
    fail: () => void,
    attempts: number
  ) => any
}

See also Guide - Async Components

Éditer cette page sur GitHub

API Globale : Générale ​

version ​

nextTick() ​

defineComponent() ​

Signature de fonction ​

Note sur le treeshaking de webpack ​

defineAsyncComponent() ​

API Globale : Générale

version

nextTick()

defineComponent()

Signature de fonction

Note sur le treeshaking de webpack

defineAsyncComponent()