Le processus d'un composant de sa création à sa destruction est appelé cycle de vie.
Lorsque nous utilisons l'API combinée Vue3, il n'y a pas de cycles de vie beforeCreate et created
Le cycle de vie des composants est le suivant :
- onBeforeMount() est appelé avant que le composant DOM ne soit rendu et monté. A cette étape, l'élément racine n'existe pas encore.
- onMounted() est appelé après le premier rendu du composant, l'élément est maintenant disponible, permettant un accès direct au DOM
- onBeforeUpdate() Appelé lorsque les données sont mises à jour, avant que le DOM virtuel ne soit corrigé.
- onUpdated() Après la mise à jour du DOM, la méthode mise à jour sera appelée.
- onBeforeUnmount() Appelé avant que l'instance du composant ne soit démontée. A ce stade, l'instance est encore entièrement fonctionnelle.
- onUnmount() Appelé après le démontage de l'instance du composant. Lorsque ce crochet est appelé, toutes les directives de l'instance de composant sont non liées, tous les écouteurs d'événement sont supprimés et toutes les instances de composant enfant sont démontées.
Crochets de l'API d'options et de l'API de composition
| API facultative | API composite |
|---|---|
| avantCréer | Pas besoin* |
| créé | Pas besoin* |
| avant le montage | onBeforeMount |
| monté | surmonté |
| avant la mise à jour | onBeforeUpdate |
| mis à jour | mis à jour |
| avantDémonter | onBeforeUnmount |
| non monté | surDémonté |
| errorCaptured | onErrorCaptured |
| rendusuivi | onRenderTracked |
| renderTriggered | onRenderTriggered |
| activé | activé |
| désactivé | surDésactivé |
Exemple de code :
<template>
<h3>我是组件</h3>
<div ref="div">{
{str}}</div>
<button @click="change">修改str</button>
</template>
<script setup lang="ts">
import {
ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
const str=ref<string>('我是大漂亮');
console.log(str);
const div=ref<HTMLDivElement>();
const change=()=>{
str.value='小可爱';
}
onBeforeMount(()=>{
console.log('创建前',div.value);
})
onMounted(()=>{
console.log('挂载完成',div.value);
})
onBeforeUpdate(()=>{
console.log('更新前')
})
onUpdated(()=>{
console.log('更新完成')
})
onBeforeUnmount(()=>{
console.log('卸载之前')
})
onUnmounted(()=>{
console.log('卸载完成')
})
</script>
<style scoped>
</style>
Chargement de la page terminé :
la référence<"I'm Damei">
n'était pas définie avant la création et le montage
était terminé
<div>小可爱</div>"
Après avoir cliqué sur le bouton :
Impression de la console :
avant la mise à jour,
mise à jour terminée