Vue d’ensemble des phases du cycle de vie
Création, montage, mise à jour, démontage — ce qui se produit à chaque phase.
Vue d’ensemble des phases du cycle de vie est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Un composant a un cycle de vie
Chaque composant Vue suit un parcours prévisible : il est créé, monté dans la page, mis à jour lorsque les données changent, puis finalement supprimé. Ce sont les phases du cycle de vie, et Vue vous permet d’intervenir lors de chacune d’elles.
Les quatre phases
- Création — la configuration s’exécute et la réactivité est initialisée.
- Montage — le DOM est créé et inséré.
- Mise à jour — les changements réactifs déclenchent de nouveaux rendus.
- Démontage — le composant est supprimé et nettoyé.
Phase 1 : création
Tout d’abord, l’instance du composant est créée et la réactivité est mise en place. Avec l’API de composition, <script setup> (ou setup()) s’exécute ici. Le DOM n’existe pas encore ; vous ne pouvez donc pas lire les éléments à ce stade.
Ce que vous pouvez faire pendant la création
La création est un bon moment pour déclarer l’état réactif et lancer les opérations qui ne dépendent pas du DOM, comme démarrer la récupération de données. N’oubliez pas que le modèle n’a pas encore été rendu : les références au DOM sont donc toujours vides.
<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>Phase 2 : montage
Vue crée ensuite les véritables nœuds du DOM à partir de votre modèle et les insère dans la page. Après le montage, les références du modèle pointent vers de vrais éléments et vous pouvez mesurer ou modifier le DOM.
La fonction de montage
onMounted s’exécute une fois, juste après l’insertion du composant. C’est l’endroit prévu pour la configuration qui dépend du DOM, comme initialiser un graphique ou donner le focus à un champ de saisie.
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('in the DOM now')
})
</script>Phase 3 : mise à jour
Lorsque des données réactives dont dépend un composant changent, Vue effectue un nouveau rendu et met efficacement le DOM à jour — uniquement les parties qui ont changé. Ce cycle de mise à jour peut se produire de nombreuses fois pendant la durée de vie d’un composant.
Les fonctions de mise à jour
onBeforeUpdate s’exécute juste avant la mise à jour du DOM, et onUpdated juste après. Elles se déclenchent à chaque changement réactif qui affecte le rendu.
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM patched')
})
</script>Phase 4 : démontage
Lorsqu’un composant est supprimé — via v-if, un changement de route ou la suppression d’un élément de liste — Vue le démonte. C’est le moment de nettoyer les minuteurs, les écouteurs et les abonnements afin d’éviter les fuites mémoire.
La fonction de démontage
onUnmounted s’exécute après la disparition du composant. Annulez les intervalles, supprimez les écouteurs globaux et interrompez ici les requêtes en cours.
<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>L’ordre complet
Les fonctions s’exécutent dans cet ordre pendant la durée de vie d’un composant : setup, onBeforeMount, onMounted, puis des paires répétées onBeforeUpdate/onUpdated, et enfin onBeforeUnmount/onUnmounted.
Vérification rapide
Confirmez votre compréhension du cycle de vie.
Récapitulatif
Vous avez maintenant une vue d’ensemble :
- Création : la configuration s’exécute, la réactivité est prête, aucun élément du DOM n’existe encore.
- Montage : le DOM est créé et inséré ; les références deviennent utilisables.
- Mise à jour : une modification réactive déclenche une mise à jour ciblée efficace.
- Démontage : le composant est supprimé ; effectuez ici le nettoyage.
Questions Fréquemment Posées
La leçon « Vue d’ensemble des phases du cycle de vie » est-elle gratuite ?
Oui — le texte complet de « Vue d’ensemble des phases du cycle de vie » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Vue d’ensemble des phases du cycle de vie » ?
Création, montage, mise à jour, démontage — ce qui se produit à chaque phase. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Vue d’ensemble des phases du cycle de vie » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Vue d’ensemble des phases du cycle de vie
- onMounted et onBeforeMount
- onUpdated et onBeforeUpdate
- onUnmounted et stratégies de nettoyage