Qu'est-ce que la fonction hook de cycle de vie de vue

Dans Vue, les fonctions hook de cycle de vie font référence à certaines fonctions qui s'exécuteront lorsque le cycle de vie passera par le processus de création et de mise à jour du DOM ; les composants Vue peuvent être créés et déclarés dans ces fonctions.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Qu'est-ce que la fonction de hook de cycle de vie de Vue ?

Chaque instance de Vue passe par une série d'étapes d'initialisation. De la définition des données lors de la création à la compilation du modèle, en passant par le chargement de l'instance dans le DOM et enfin la mise à jour du DOM lors des modifications de données. Ce processus est appelé le cycle de vie d'une instance Vue. Par défaut, au fur et à mesure du processus de création et de mise à jour du DOM, certaines fonctions y sont exécutées. Au sein de ces fonctions, les composants Vue sont créés et déclarés. le cycle de vie.

Vue propose huit méthodes de cycle de vie :

• Avant de créer

• Créé

• Avant le montage

• Monté

• Avant la mise à jour

• Mise à jour

• Avant de détruire

• Détruit

Dans cet article, vous découvrirez tous ces crochets et apprendrez des exemples de chaque étape.

Cet article utilisera le composant de test, qui se trouve dans le dossier composants du dossier src. Cela devrait ressembler à ceci :

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

Dans ce tutoriel, la section script sera utilisée individuellement pour différents cas de hook.

beforeCreate()

Il s'agit du premier hook de cycle de vie appelé dans Vue.js, il est appelé immédiatement après l'initialisation de l'instance Vue.

<script>
export default {
  name: &#39;Test&#39;,
  beforeCreate() {
    alert(&#39;beforCreate hook has been called&#39;);
    console.log(&#39;beforCreate hook has been called&#39;);
  }
}
</script>

Vous pouvez exécuter le programme dans l'environnement de développement pour vérifier l'interface.

npm run serve

Notez qu'avant de charger le composant, l'instruction d'alerte écrite dans le hook de cycle de vie est d'abord exécutée. C'est exactement ce qui se produit lorsque la fonction est appelée avant que le moteur Vue ne crée le composant d'application. À l'heure actuelle, il est à l'étape beforeCreate et les propriétés calculées, les observateurs, les événements, les propriétés des données, les opérations, etc. n'ont pas encore été définis.

created()

Comme vous l'avez deviné, il s'agit du deuxième hook de cycle de vie qui est appelé immédiatement après le hook beforeCreated. À ce stade, l'instance Vue a été initialisée et ses propriétés calculées, observateurs, événements, propriétés de données et opérations ultérieures sont activées.

<script>
export default {
  name: &#39;Test&#39;,
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert(&#39;Created hook has been called&#39;);
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

Si vous exécutez le programme, vous verrez que les types de données sont maintenant affichés. Cela n'est pas possible dans la phase beforeCreated car l'activation qui se produit alors n'a pas encore eu lieu. Mais l'instance Vue n'est pas installée à ce stade, vous ne pouvez donc pas manipuler le DOM ici, les propriétés des éléments ne sont pas encore disponibles.

beforeMount()

C'est le moment avant que l'instance ne soit montée sur le DOM. Les modèles et les styles étendus sont compilés ici, mais vous ne pouvez toujours pas manipuler le DOM et les attributs des éléments ne sont toujours pas disponibles.

<script>
export default {
  beforeMount() {
    alert(&#39;beforeMount is called&#39;)
  }
}
</script>

Mounted()

Il s'agit du prochain hook de cycle de vie appelé d'après beforeMounted . Il est appelé immédiatement après l'installation de l'instance. Le composant d'application ou d'autres composants du projet peuvent désormais être utilisés. Il est désormais possible d'effectuer des opérations telles que l'ajustement des données aux modèles, le remplacement des éléments DOM par des éléments remplis de données, et les attributs des éléments sont désormais disponibles.

<script>
export default {
  mounted() {
    alert(&#39;mounted has been called&#39;); 
   }
}
</script>

C'est l'emplacement par défaut des projets créés à l'aide de Vue CLI car comme nous l'avons vu au début, l'installation est déjà effectuée dans le fichier main.js. C'est pourquoi vous ne pourrez peut-être pas utiliser d'autres hooks, puisque l'instance est déjà installée pour vous par défaut.

beforeUpdate()

Apportez des modifications aux données qui doivent être mises à jour ici. Cette étape convient à toute logique avant d'apporter des modifications telles que la suppression des écouteurs d'événements.

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
 },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

Au départ, il y a une annotation de bienvenue sur le DOM, mais pendant la phase de montage (où le DOM peut être manipulé) les données changent, donc l'alerte beforeUpdate apparaît avant le changement.

updated()

Ce hook de cycle de vie est appelé immédiatement après une mise à jour du DOM, il est exécuté après l'appel du hook beforeUpdate. Il est possible d'effectuer des opérations liées au DOM ici, mais changer l'état dans ce hook n'est pas recommandé car Vue fournit déjà une plate-forme spécifiquement pour cela.

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
  },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
updated(){
 alert(&#39;Updated hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

beforeDestroy()

Le moment d'appeler ce hook de cycle de vie Vue est avant que l'instance Vue ne soit détruite, alors que l'instance et toutes les fonctions sont toujours intactes et y fonctionnent. À ce stade, vous pouvez effectuer la gestion des ressources, supprimer des variables et nettoyer les composants.

<script>
export default {
name: &#39;Test&#39;,
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

Il s'agit de la dernière étape du cycle de vie de Vue où toutes les instances enfants de Vue ont été détruites et des éléments tels que les écouteurs d'événements et toutes les directives ont été dissociés à ce stade. Appelez ceci après avoir exécuté destroy sur l’objet.

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

Lorsque vous exécutez le programme et regardez la console, vous ne verrez rien.

【Recommandation associée : "Tutoriel vue.js"】

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!