Une brève introduction aux fonctions de hook du cycle de vie de vue (exemple de code)

Ce que cet article vous apporte est une brève introduction (exemple de code) sur la fonction de hook du cycle de vie de vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Commençons par une image

L'image suivante est le diagramme du cycle de vie officiellement affiché

La fonction hook de cycle de vie de Vue instance ( 8)
1. beforeCreate
Je viens de créer un nouveau composant et je ne peux pas accéder aux données et au vrai dom
2 L'attribut data a été créé. attribué une valeur, et il peut Les données sont modifiées mais la mise à jour ne sera pas déclenchée. Ici, vous pouvez obtenir les données initiales
3 avant queMount
le rendu soit prêt à être rendu. La modification des données à ce moment ne déclenchera pas la mise à jour. , ici vous pouvez obtenir les données initiales
4. monté
commence le rendu, restitue le vrai DOM, exécute la fonction de hook monté, le composant est apparu sur la page, et les données et événements sont tous traités par le DOM. Ici, vous pouvez modifier pour effectuer de vraies opérations DOM
5. beforeUpdate
, une fonction qui sera exécutée avant que les données de l'instance ne soient mises à jour. Le DOM virtuel reconstruira le DOM virtuel et le restituera après l'avoir comparé avec. le dernier DOM virtuel. N'oubliez pas de ne pas modifier les données, sinon une boucle infinie se produira
6 update
est une fonction qui sera exécutée après la mise à jour, sinon une boucle infinie se produira
7. 🎜>avant que l'instance ne soit détruite. Fonctions exécutées, effectuer le travail ultérieur, effacer les minuteries, effacer les événements non liés aux instructions, etc.
8. détruit
Fonctions qui seront exécutées après la destruction de l'instance, et peuvent également faire un travail ultérieur.

La console a cette séquence de sortie :

<template>
  <div class="hello">
   Hello World!
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  beforeCreate: function() {
    console.log("data属性光声明没有赋值的时候");
  },
  created: function() {
    console.log("data属性完成了赋值");
  },
  beforeMount: function() {
    console.log("页面上的{{name}}还没有被渲染成真正的数据");
  },
  mounted: function() {
    console.log("页面上的{{name}}被渲染成真正的数据");
  },
  beforeUpdate: function() {
    console.log(" 数据（data属性）更新之前会执行的函数");
  },
  updated: function() {
    console.log("数据（data属性）更新完会执行的函数");
  },
  beforeDestroy: function() {
    console.log("实例被销毁之前会执行的函数");
  },
  destroyed: function() {
    console.log("实例被销毁后会执行的函数");
  }
};
</script>
<style scoped>
</style>

À propos de ceci, voici l'ordre dans lequel les fonctions de hook de cycle de vie sont exécutées, y compris le fait que j'ai utilisé angulaire à développer avec vue avant De même, il possède également sa propre fonction de hook de cycle de vie.

Le cycle de vie est simplement un processus allant de la création à l'initialisation jusqu'à la destruction d'un composant. Dans ce processus, avec ces fonctions de hook de cycle de vie, nous pouvons faire fonctionner l'ensemble du composant plus facilement.

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!