Maison  >  Article  >  interface Web  >  Quels sont les cycles de vie de vue3

Quels sont les cycles de vie de vue3

百草
百草original
2024-02-01 16:33:471962parcourir

Cycle de vie de Vue3 : 1. beforeCreate ; 3. beforeMount ; 4. beforeUpdate ; 7. beforeDestroy ; 12. getDerivedStateFromProps et ainsi de suite.

Quels sont les cycles de vie de vue3

Vue 3 introduit de nouvelles fonctions de hook de cycle de vie, et certaines anciennes fonctions de hook ont ​​été refactorisées ou supprimées. Voici quelques fonctions de hook de cycle de vie de Vue 3 :

1. beforeCreate : Appelée avant la création de l'instance, elle n'a pas été montée pour le moment et l'observateur de données et les événements n'ont pas encore été initialisés.

2. créé : Appelé après la création de l'instance, à ce stade, l'observation des données (observateur de données) et l'initialisation de l'événement sont terminées, mais le DOM n'est pas encore monté.

3. beforeMount : Appelée avant le montage, la fonction de rendu associée est appelée pour la première fois. Le modèle peut être compilé et rendu à ce stade.

4. Mounted : Appelé après le montage de l'instance sur le DOM. À ce stade, tous les éléments el et ref ont été analysés et $refs a été rempli.

5. beforeUpdate : Appelé lorsque les données sont mises à jour, ce qui se produit avant que le DOM virtuel ne soit corrigé. Vous pouvez effectuer des mises à jour de statut ou modifier manuellement le DOM à ce stade.

6. mis à jour : Appelé une fois la mise à jour des données terminée, ce qui se produit après que le DOM virtuel soit corrigé et que le DOM soit mis à jour.

7. beforeDestroy : Appelé avant la destruction de l'instance. A ce stade, l'instance est encore entièrement disponible.

8. détruit : Appelé après la destruction de l'instance. Après l'appel, tous les écouteurs d'événements et sous-composants seront supprimés, et tous les hooks de destruction de sous-composants seront également appelés.

9. activé : Appelé lorsque le composant keep-alive activé réapparaît.

10. désactivé : Appelé lorsque le composant keep-alive activé quitte.

11. errorCaptured : Appelé lors de la gestion des erreurs dans la phase de capture. Si ce hook ne renvoie pas de valeur ou renvoie false, le hook errorCaptured du composant parent continuera à être appelé, sinon l'erreur ne sera pas traitée davantage.

12. getDerivedStateFromProps : Appelé avant chaque rendu, utilisé pour dériver l'état des accessoires. Il s'agit d'une méthode statique qui peut être modifiée avant la création du composant ou après sa destruction.

13. renderTracked et renderTriggered : Ces deux hooks sont déclenchés pendant le processus de rendu, le premier est déclenché lors du suivi du rendu, et le second est déclenché lorsque le déclenchement du rendu est forcé.

14. configuration : Dans Vue 3, l'API d'options de composants est remplacée par l'API de composition. La fonction de configuration est le point d'entrée de l'API Composition et est utilisée pour organiser et réutiliser la logique des composants. Il s'agit d'une nouvelle manière, plus puissante et plus flexible, de définir les options des composants.

Ce qui précède est la fonction de hook de cycle de vie de Vue 3. Il convient de noter qu'en raison de l'optimisation approfondie de la couche sous-jacente par Vue 3, certaines anciennes fonctions de hook (telles que init, ready, etc.) ont été supprimées ou fusionnées dans d'autres fonctions de hook. Dans le même temps, Vue 3 ajoute également de nouvelles fonctions de hook pour optimiser les performances et la gestion des erreurs, telles que activées, désactivées, errorCaptured, etc.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn