Vue3 Hooks de cycle de vie

Dans Vue.js, les fonctions de hook de cycle de vie sont une série de méthodes automatiquement appelées par Vue lors de la création, de la mise à jour, de la destruction et d'autres processus d'une instance de composant. Au cours de ces étapes, le composant déclenche une série de fonctions appelées "hooks de cycle de vie", permettant aux développeurs d'exécuter du code personnalisé à des moments spécifiques.

Enregistrement et utilisation des hooks de cycle de vie

Hook mounted : Ce hook est déclenché après que le composant a terminé son rendu initial et généré les nœuds DOM. Par exemple :

export default {
  mounted() {
    console.log(`组件已挂载。`);
  }
}

Autres hooks courants : En plus de mounted, il existe également des hooks tels que updated et unmounted, qui sont appelés à différentes étapes du cycle de vie de l'instance.

Remarques sur les hooks de cycle de vie

contexte de `this` :Dans toutes les fonctions de hook de cycle de vie, `this` pointe automatiquement vers l'instance de composant qui l'appelle.

Éviter d'utiliser des fonctions fléchées :Lorsque vous définissez des hooks de cycle de vie, n'utilisez pas de fonctions fléchées, car cela rendrait impossible l'accès à l'instance de composant via `this`.

En utilisant correctement les hooks de cycle de vie, les développeurs peuvent exécuter une logique spécifique à différentes étapes d'un composant, ce qui améliore la flexibilité et les fonctionnalités du composant.

Voici un diagramme du cycle de vie de l'instance :

Voici les fonctions de hook de cycle de vie de Vue.js

Voici une introduction détaillée aux hooks du cycle de vie des composants Vue :

Dans Vue.js, les fonctions de hook du cycle de vie désignent une série de méthodes que Vue appelle automatiquement lors de la création, de la mise à jour, de la destruction et d'autres processus d'une instance de composant. Grâce à ces fonctions de hook, des opérations spécifiques peuvent être effectuées à différentes étapes du cycle de vie d'un composant. Voici une introduction détaillée aux hooks du cycle de vie des composants Vue :

1. beforeCreate

• Description: Appelé après l'initialisation de l'instance, avant l'observation des données et la configuration des événements.
• Utilisation: Vous pouvez initialiser certaines données non proxifiées par Vue à ce stade.

Exemple:

2. created

• Description: Appelé immédiatement après la création de l'instance. À ce stade, l'instance a terminé les configurations suivantes : l'observation des données, le calcul des propriétés et des méthodes, ainsi que les callbacks de watch/événements ; la phase de montage n'a pas encore commencé.
• Utilisation: Vous pouvez accéder aux données et les modifier à ce stade, mais le DOM n'est pas encore monté.

Exemple:

3. beforeMount

• Description: Appelé avant le début du montage : la fonction de rendu correspondante est appelée pour la première fois.
• Utilisation: Effectuer certaines opérations avant le montage, comme modifier la structure du DOM, etc.

Exemple:

4. mounted

• Description: elPar le nouvellement créévm.$elremplacé, et ce hook est appelé après son montage sur l'instance.
• Utilisation: Vous pouvez manipuler le DOM à ce stade et exécuter une logique liée au DOM.

Exemple:

5. beforeUpdate

• Description: Appelé lorsque les données sont mises à jour, avant que le DOM virtuel ne soit re-rendu et patché.
• Utilisation: Vous pouvez accéder à l'état avant la mise à jour à ce stade.

Exemple:

6. updated

• Description: Appelé après que le DOM virtuel a été re-rendu et patché en raison de modifications des données.
• Utilisation: Vous pouvez manipuler le DOM à ce stade, mais évitez de modifier les données pendant cette période, car cela peut provoquer une boucle infinie de mises à jour.

Exemple:

7. beforeUnmount（Vue 3）

• Description: Appelé avant que l'instance ne soit démontée.
• Utilisation: Effectuer certaines opérations de nettoyage avant le démontage de l'instance, telles que la suppression des écouteurs d'événements, etc.

Exemple:

8. unmounted（Vue 3）

• Description: Appelé après le démontage de l'instance.
• Utilisation: Effectuer certaines opérations de nettoyage après le démontage de l'instance, telles que la destruction des temporisateurs, etc.

Exemple:

Ordre d'exécution des hooks de cycle de vie

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate (déclenché lorsque les données changent)
6. updated (déclenché lorsque les données changent)
7. beforeUnmount
8. unmounted

Exemple

Voici un exemple complet de composant Vue qui démontre l'utilisation de toutes les fonctions de hook de cycle de vie :

Cet exemple affichera les logs de chaque fonction de hook de cycle de vie dans la console, ce qui aide à comprendre l'ordre et l'objectif de chaque étape du cycle de vie.

Hooks de l'API Composition

Vue 3 introduit l'API Composition (Composition API), via lasetupfonction, les hooks de cycle de vie peuvent être organisés plus clairement en termes de logique. Lorsqu'on utilise l'API Composition, ces hooks sont définis via laonXxxfonction :

• onMounted: équivalent àmounted。
• onBeforeUnmount: équivalent àbeforeUnmount。
• onUnmounted: équivalent àunmounted。
• onBeforeMount: équivalent àbeforeMount。
• onBeforeUpdate: équivalent àbeforeUpdate。
• onUpdated: équivalent àupdated。
• onCreatedetonBeforeCreateIls ne sont généralement pas couramment utilisés dans l'API Composition, carsetuple code qu'il contient s'exécutera pendant la phase de création.

Hooks de cycle de vie avec l'API Composition :

Avantages de l'API Composition :

• Forte réutilisabilité: Les hooks de cycle de vie peuvent être combinés avec d'autres logiques, ce qui facilite leur encapsulation et leur réutilisation.
• Logique plus claire: Avecsetupl'autre logique qu'il contient implémentée dans une seule fonction, ce qui réduit la dispersion et la complexité du code.