Maison interface Web Questions et réponses frontales Quels sont les cycles de vie de vue3

Quels sont les cycles de vie de vue3

Feb 01, 2024 pm 04:33 PM
vue3 生命周期

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

vue3+vite : Comment résoudre l'erreur lors de l'utilisation de require pour importer dynamiquement des images dans src vue3+vite : Comment résoudre l'erreur lors de l'utilisation de require pour importer dynamiquement des images dans src May 21, 2023 pm 03:16 PM

vue3+vite:src utilise require pour importer dynamiquement des images et des rapports d'erreurs et des solutions. vue3+vite importe dynamiquement plusieurs images. Si vue3 est développé à l'aide de TypeScript, il y aura un message d'erreur indiquant que requireisnotdefined ne peut pas être utilisé comme imgUrl. :require(' .../assets/test.png') est importé car TypeScript ne prend pas en charge require, donc l'importation est utilisée. Voici comment le résoudre : utilisez waitimport.

Comment Vue3 analyse le démarque et implémente la mise en évidence du code Comment Vue3 analyse le démarque et implémente la mise en évidence du code May 20, 2023 pm 04:16 PM

Pour implémenter le front-end du blog avec Vue, vous devez implémenter l'analyse markdown. S'il y a du code, vous devez implémenter la mise en évidence du code. Il existe de nombreuses bibliothèques d'analyse de démarques pour Vue, telles que markdown-it, vue-markdown-loader, Markdown, vue-markdown, etc. Ces bibliothèques sont toutes très similaires. Marked est utilisé ici et highlight.js est utilisé comme bibliothèque de mise en évidence du code. Les étapes d'implémentation spécifiques sont les suivantes : 1. Installez les bibliothèques dépendantes. Ouvrez la fenêtre de commande sous le projet vue et entrez la commande suivante npminstallmarked-save//marked pour convertir le markdown en htmlnpmins.

Comment actualiser le contenu partiel de la page dans Vue3 Comment actualiser le contenu partiel de la page dans Vue3 May 26, 2023 pm 05:31 PM

Pour réaliser un rafraîchissement partiel de la page, il suffit d'implémenter le re-rendu du composant local (dom). Dans Vue, le moyen le plus simple d'obtenir cet effet est d'utiliser la directive v-if. Dans Vue2, en plus d'utiliser l'instruction v-if pour restituer le dom local, nous pouvons également créer un nouveau composant vierge. Lorsque nous devons actualiser la page locale, accéder à cette page de composant vierge, puis y revenir. la garde beforeRouteEnter dans la page d’origine vierge. Comme le montre la figure ci-dessous, comment cliquer sur le bouton d'actualisation dans Vue3.X pour recharger le DOM dans la zone rouge et afficher l'état de chargement correspondant. Puisque la garde dans le composant dans la syntaxe scriptsetup dans Vue3.X n'a ​​que o

Comment gérer la destruction et la gestion du cycle de vie des pointeurs de fonctions C++ ? Comment gérer la destruction et la gestion du cycle de vie des pointeurs de fonctions C++ ? Apr 17, 2024 pm 05:48 PM

En C++, les pointeurs de fonction nécessitent une destruction et une gestion du cycle de vie appropriées. Ceci peut être réalisé en détruisant manuellement le pointeur de fonction et en libérant la mémoire. Utilisez des pointeurs intelligents, tels que std::unique_ptr ou std::shared_ptr, pour gérer automatiquement le cycle de vie des pointeurs de fonction. Liez le pointeur de fonction à l'objet et le cycle de vie de l'objet gère la destruction du pointeur de fonction. Dans la programmation GUI, l'utilisation de pointeurs intelligents ou la liaison à des objets garantit que les fonctions de rappel sont détruites au moment approprié, évitant ainsi les fuites de mémoire et les incohérences.

Comment sélectionner un avatar et le recadrer dans Vue3 Comment sélectionner un avatar et le recadrer dans Vue3 May 29, 2023 am 10:22 AM

L'effet final est d'installer le composant VueCropper filaddvue-cropper@next. La valeur d'installation ci-dessus est pour Vue3 ou si vous souhaitez utiliser d'autres méthodes de référence, veuillez visiter son adresse officielle npm : tutoriel officiel. Il est également très simple de le référencer et de l'utiliser dans un composant. Il suffit d'introduire le composant correspondant et son fichier de style. Je ne le référence pas globalement ici, mais j'introduis uniquement import{userInfoByRequest}from'../js/api. ' dans mon fichier de composant import{VueCropper}from'vue-cropper&.

Comment utiliser les composants réutilisables Vue3 Comment utiliser les composants réutilisables Vue3 May 20, 2023 pm 07:25 PM

Préface Que ce soit vue ou réagir, lorsque nous rencontrons plusieurs codes répétés, nous réfléchirons à comment réutiliser ces codes, au lieu de remplir un fichier avec un tas de codes redondants. En fait, Vue et React peuvent être réutilisés en extrayant des composants, mais si vous rencontrez quelques petits fragments de code et que vous ne souhaitez pas extraire un autre fichier, en comparaison, React peut être utilisé dans le même Déclarez le widget correspondant dans le fichier. , ou implémentez-le via la fonction de rendu, telle que : constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Comment utiliser definitionCustomElement pour définir des composants dans Vue3 Comment utiliser definitionCustomElement pour définir des composants dans Vue3 May 28, 2023 am 11:29 AM

Utilisation de Vue pour créer des éléments personnalisés WebComponents est un nom collectif pour un ensemble d'API Web natives qui permettent aux développeurs de créer des éléments personnalisés réutilisables (customelements). Le principal avantage des éléments personnalisés est qu’ils peuvent être utilisés avec n’importe quel framework, même sans. Ils sont idéaux lorsque vous ciblez des utilisateurs finaux susceptibles d'utiliser une pile technologique frontale différente, ou lorsque vous souhaitez dissocier l'application finale des détails d'implémentation des composants qu'elle utilise. Vue et WebComponents sont des technologies complémentaires et Vue offre un excellent support pour l'utilisation et la création d'éléments personnalisés. Vous pouvez intégrer des éléments personnalisés dans des applications Vue existantes ou utiliser Vue pour créer

Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé Comment utiliser vue3+ts+axios+pinia pour obtenir un rafraîchissement insensé May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia réalise un rafraîchissement insensé 1. Téléchargez d'abord aiXos et pinianpmipinia dans le projet--savenpminstallaxios--save2 Encapsuler la requête axios-----Télécharger js-cookienpmiJS-cookie-s//Introduire aixosimporttype{AxiosRequestConfig , AxiosResponse}de"axios";importaxiosfrom'axios';import{ElMess

See all articles