Bases du développement VUE3 : tutoriel sur l'utilisation des composants asynchrones

Vue 3 est la dernière version majeure de Vue.js, qui présente de nombreuses nouvelles fonctionnalités et améliorations par rapport à Vue 2. L’une des améliorations les plus marquantes est l’utilisation de composants asynchrones. Dans cet article, nous approfondirons l'utilisation et les techniques des composants asynchrones dans Vue 3.

Qu'est-ce qu'un composant asynchrone ?

Dans Vue, les composants peuvent être introduits via l'instruction import ou require fonction. Ces composants sont appelés composants synchrones et leur code est chargé et compilé immédiatement au démarrage de l'application. Cependant, à mesure que les applications deviennent plus volumineuses, les composants chargés de manière synchrone peuvent entraîner des temps de chargement plus longs sur le premier écran et même consommer de grandes quantités de mémoire et de bande passante.

Pour résoudre ce problème, Vue 3 propose le concept de composants asynchrones. Les composants asynchrones sont des composants chargés et compilés en cas de besoin. Cela signifie que lorsque l'application doit charger certains composants, elle demandera ces composants de manière asynchrone au serveur et les chargera et les compilera dynamiquement après le retour de la réponse. Cela peut réduire considérablement les temps de chargement du premier écran et réduire l'empreinte mémoire et la consommation de bande passante de l'application.

Comment utiliser les composants asynchrones ?

Dans Vue 3, les composants asynchrones peuvent être définis de la manière suivante :

const AsyncComponent = defineAsyncComponent(async () => {
  // 异步加载和编译组件的代码
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

Le code ci-dessus définit un name C'est un composant asynchrone de AsyncComponent. La manière de définir les composants asynchrones est similaire à celle des composants synchrones, sauf que les composants asynchrones doivent utiliser la fonction defineAsyncComponent au lieu de la fonction defineComponent. AsyncComponent的异步组件。定义异步组件的方式与同步组件类似，只不过异步组件需要使用defineAsyncComponent函数而不是defineComponent函数。

在异步组件的定义中，我们通过async和await关键字异步加载和编译组件的代码。在这个例子中，我们使用import语句从@/components/AsyncComponent.vue文件中加载组件，并返回它的默认导出。需要注意的是，在异步组件的定义中，我们只需要返回组件的默认导出即可，不要返回Vue实例或组件选项。

一旦我们定义了异步组件，我们就可以在父组件中使用它了。例如，如果我们想在App.vue组件中使用上面定义的异步组件，我们可以这样做：

<template>
  <div>
    <h1>异步组件</h1>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue"
const AsyncComponent = defineAsyncComponent(async () => {
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

export default {
  components: {
    AsyncComponent
  }
}
</script>

上面的代码中，在components选项中注册了异步组件AsyncComponent。然后在模板中使用<AsyncComponent>标记，就可以显示异步组件了。

当父组件被渲染时，Vue 3会检测到<AsyncComponent>标记，然后从服务器异步请求我们定义的异步组件。一旦异步响应返回，Vue将动态加载和编译组件，并将其显示在页面上。

除了上面的方式，我们还可以使用Vue 3提供的defineAsyncComponent函数的其他方式来定义异步组件。例如，我们可以使用动态导入和defineAsyncComponent

Dans la définition d'un composant asynchrone, on charge et compile le code du composant de manière asynchrone grâce aux mots-clés async et await. Dans cet exemple, nous utilisons l'instruction import pour charger le composant à partir du fichier @/components/AsyncComponent.vue et renvoyer son exportation par défaut. Il est à noter que dans la définition d'un composant asynchrone, il suffit de renvoyer l'export par défaut du composant, pas l'instance Vue ou les options du composant.

Une fois que nous avons défini le composant asynchrone, nous pouvons l'utiliser dans le composant parent. Par exemple, si on veut utiliser le composant asynchrone défini ci-dessus dans le composant App.vue, on peut faire ceci :

const AsyncComponent = defineAsyncComponent(() => import("@/components/AsyncComponent.vue"))

Dans le code ci-dessus, dans le components< Le composant asynchrone <code>AsyncComponent est enregistré dans l'option /code>. Utilisez ensuite la balise <AsyncComponent> dans le modèle pour afficher le composant asynchrone.

Lorsque le composant parent est rendu, Vue 3 détectera la balise <AsyncComponent> puis demandera de manière asynchrone le composant asynchrone que nous avons défini au serveur. Une fois la réponse asynchrone revenue, Vue chargera et compilera dynamiquement le composant et l'affichera sur la page.

En plus de la méthode ci-dessus, nous pouvons également utiliser d'autres méthodes pour définir des composants asynchrones à l'aide de la fonction defineAsyncComponent fournie par Vue 3. Par exemple, nous pouvons utiliser une combinaison d'importation dynamique et de la fonction defineAsyncComponent pour définir un composant asynchrone : #🎜🎜#

const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      import("@/components/AsyncComponent.vue").then(module => {
        resolve(module.default)
      })
    }, 1000)
  })
)

#🎜🎜# Nous pouvons également utiliser la syntaxe traditionnelle Promise pour définir un composant asynchrone : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons une Promise avec un délai de 1 seconde pour simuler le chargement et la compilation asynchrones des composants. #🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Les composants asynchrones sont une fonctionnalité puissante et utile dans Vue 3. En utilisant des composants asynchrones, nous pouvons améliorer considérablement les performances et l'expérience utilisateur de nos applications. Dans cet article, nous approfondissons l'utilisation et les techniques des composants asynchrones dans Vue 3. J'espère que cet article pourra vous aider à comprendre et à utiliser les composants asynchrones de Vue 3. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!