- Cycle de vie dans Vue3
6.1 Comprendre le cycle de vie
6.1.1 Diagramme du cycle de vie
Comme illustré dans le schéma, un composant traveres huit étapes distinctes depuis sa créattion jusqu'à sa destruction finale :
- beforeCreate : Avant la création de l'instance
- created : Après la création de l'insatnce
- beforeMount : Avant le montage du DOM
- mounted : Après le montage du DOM
- beforeUpdate : Avant la mise à jour des données
- updated : Après la mise à jour des données
- beforeUnmount : Avant le démontage du DOM
- unmounted : Après le démontage du DOM
6.1.2 Exemple pratique
<body>
<div id="conteneur">
<composant-personnalise v-if="afficher"></composant-personnalise>
<button @click="inverser">{{ texteBouton }}</button>
</div>
<script src="../js/vue3.js"></script>
<script>
const application = Vue.createApp({
data() {
return {
afficher: true,
texteBouton: 'Masquer'
}
},
methods: {
inverser() {
this.afficher = !this.afficher
this.texteBouton = this.afficher ? 'Masquer' : 'Afficher'
}
}
})
application.component('composant-personnalise', {
template: `<div>
{{ compteur }} <button @click="incrementer">+</button>
</div>`,
data() {
return {
compteur: 0
}
},
methods: {
incrementer() {
this.compteur++
}
},
beforeCreate() {
console.log('beforeCreate - Fonction du cycle de vie avant création de l\'instance Vue')
},
created() {
console.log('created - Fonction du cycle de vie après création de l\'instance Vue')
},
beforeMount() {
console.log('beforeMount - Fonction du cycle de vie avant montage du DOM')
},
mounted() {
console.log('mounted - Fonction du cycle de vie après montage du DOM')
},
beforeUpdate() {
console.log('beforeUpdate - Fonction du cycle de vie avant mise à des données')
},
updated() {
console.log('updated - Fonction du cycle de vie après mise à jour des données')
},
beforeUnmount() {
console.log('beforeUnmount - Fonction du cycle de vie avant démontage')
},
unmounted() {
console.log('unmounted - Fonction du cycle de vie après démontage')
}
})
application.mount('#conteneur')
</script>
</body>
6.2 Manipulation du DOM dans Vue
<body>
<div id="conteneur">
<composant-personnalise v-if="afficher"></composant-personnalise>
<button @click="inverser">{{ texteBouton }}</button>
</div>
<script src="../js/vue3.js"></script>
<script>
const application = Vue.createApp({
data() {
return {
afficher: true,
texteBouton: 'Masquer'
}
},
methods: {
inverser() {
this.afficher = !this.afficher
this.texteBouton = this.afficher ? 'Masquer' : 'Afficher'
}
}
})
application.component('composant-personnalise', {
template: `<div>
{{ compteur }} <button @click="incrementer" ref="bouton">+</button>
</div>`,
// L'attribut ref="bouton" permet de référencer l'élément DOM
data() {
return {
compteur: 0
}
},
methods: {
incrementer() {
this.compteur++
}
},
beforeCreate() {
console.log('beforeCreate - Fonction du cycle de vie avant création de l\'instance Vue')
},
created() {
console.log('created - Fonction du cycle de vie après création de l\'instance Vue')
},
beforeMount() {
console.log('beforeMount - Fonction du cycle de vie avant montage du DOM')
},
mounted() {
const elementDOM = this.$refs.bouton
// console.log(elementDOM)
elementDOM.style.color = 'cyan'
console.log('mounted - Fonction du cycle de vie après montage du DOM')
},
beforeUpdate() {
console.log('beforeUpdate - Fonction du cycle de vie avant mise à des données')
},
updated() {
console.log('updated - Fonction du cycle de vie après mise à jour des données')
},
beforeUnmount() {
console.log('beforeUnmount - Fonction du cycle de vie avant démontage')
},
unmounted() {
console.log('unmounted - Fonction du cycle de vie après démontage')
}
})
application.mount('#conteneur')
</script>
</body>