Fonction définirAsyncComponent dans Vue3 : chargement asynchrone des composants

Vue3 est un framework front-end très populaire qui intègre des idées de composantisation dans le développement front-end, permettant aux développeurs de créer des applications complexes plus rapidement et plus efficacement. Dans Vue3, nous utilisons souvent des composants pour créer des pages et utilisons un grand nombre de bibliothèques de composants tiers pour étendre nos fonctionnalités. Cependant, le chargement de plusieurs composants peut entraîner un démarrage plus lent de l'application, c'est pourquoi nous devons charger les composants de manière asynchrone. Dans Vue3, une fonction appelée définirAsyncComponent est fournie, qui peut nous aider à charger des composants de manière asynchrone pour améliorer les performances des applications.

Qu'est-ce que DefineAsyncComponent ?

defineAsyncComponent est une fonction fournie par Vue3, qui est utilisée pour charger des composants de manière asynchrone. Grâce à cette fonction, nous pouvons séparer l'importation et l'enregistrement des composants pour réaliser un chargement asynchrone des composants. Cette fonction accepte une fonction qui renvoie un objet Promise en tant que paramètre, et la valeur de retour de la fonction doit être un composant Vue.

Utilisation de DéfinirAsyncComponent

Voyons comment utiliser la fonction définirAsyncComponent pour charger des composants de manière asynchrone.

Tout d'abord, lorsque nous devons utiliser des composants chargés de manière asynchrone, nous devons d'abord modifier l'introduction du composant en une méthode asynchrone. Par exemple :

import { definitionAsyncComponent } from 'vue';

const AsyncComponent = definitionAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
name: 'App',
composants : {

AsyncComponent

},
}

Parmi eux, la fonction définirAsyncComponent accepte une fonction qui renvoie un objet Promise en tant que paramètre, et la méthode solve() de l'objet Promise renvoie le composant qui doit être chargé de manière asynchrone .

Lors de l'utilisation d'AsyncComponent, nous n'avons plus besoin de terminer l'enregistrement de ce composant dans le composant comme avant. Après avoir défini le composant asynchrone, nous pouvons maintenant l'utiliser dans nos modèles comme n'importe quel autre composant. Par exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
a73f915f14ced956a8272009e1c240c0
21c97d3a051048b8e55e3c8f199a54b2

Uniquement lors de l'utilisation d'AsyncComponent, le composant sera téléchargé depuis le serveur. D'ici là, le composant ne sera pas téléchargé. Cela peut considérablement améliorer le temps de démarrage des applications, en particulier dans les applications volumineuses et complexes.

Définir plusieurs composants asynchrones

Lorsque nous devons définir plusieurs composants asynchrones, nous pouvons les stocker dans un objet. Par exemple :

import { definitionAsyncComponent } from 'vue';

const asyncComponents = {
AsyncComponent1 : definitionAsyncComponent(() => import('./AsyncComponent1.vue')),
AsyncComponent2 : finishAsyncComponent(() = > ; import('./AsyncComponent2.vue')),
AsyncComponent3 : définirAsyncComponent(() => import('./AsyncComponent3.vue'))
};

export par défaut {
nom : 'App',
composants : asyncComponents
}

De cette façon, nous pouvons utiliser ces composants asynchrones n'importe où. Par exemple, utilisez dans le modèle :

d477f9ce7bf77f53fbcf36bec1b69b7a
746b2b7bc71d2d785eced02a1ba0b3ca
5c945d0b5ab3ac7263437235a5abe396
bcebd5272924e824cf06551468649c9a
21c97d3a051048b8e55e3c8f199a54b2

Summary

DefinAsyncCompon de Vue3 la fonction ent est Nous fournissons un moyen simple et efficace de charger les composants. Cela nous permet de charger des composants de manière asynchrone, améliorant ainsi les performances de nos applications. Il nous suffit de dissocier le processus de définition des composants de l'enregistrement des composants pour obtenir un chargement asynchrone des composants. Pour les applications Vue volumineuses et complexes, le chargement de composants de manière asynchrone est une excellente stratégie qui peut améliorer considérablement les performances de votre application.

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!