Introduction aux fonctions de hook du cycle de vie de Vue (avec exemples)

Cet article vous apporte une introduction à la fonction hook du cycle de vie de Vue (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Fonctions de hook de cycle de vie des instances Vue (8)

1. beforeCreate

Je viens de créer un nouveau composant et je ne peux pas accéder aux données et au domaine réel. , cela semble inutile

2. créé

L'attribut data a reçu une valeur. Les données peuvent être modifiées mais la mise à jour ne sera pas déclenchée. Ici, vous pouvez obtenir les données initiales. 🎜>

3. beforeMount

Le rendu est prêt à être rendu. Le dom virtuel dans la fonction a été créé. La modification des données à ce moment ne déclenchera pas la mise à jour

4. monté

Démarrez le rendu, restituez le vrai DOM, exécutez la fonction de hook monté, le composant est apparu sur la page et les données et événements ont été traités par le DOM. Ici, vous pouvez modifier pour effectuer de vraies opérations DOM

5. beforeUpdate

Composant, une fonction qui sera exécutée avant la mise à jour des données d'instance. Le DOM virtuel reconstruira le DOM virtuel, qui est. le même que le dernier DOM virtuel Re-rendu après comparaison. N'oubliez pas de ne pas modifier les données sinon une boucle infinie se produira

6. mise à jour

Fonction qui sera exécutée après la mise à jour, sinon une boucle infinie se produira

7. beforeDestroy

　 Fonction qui sera exécutée avant la destruction de l'instance, effectuer le travail ultérieur, effacer les minuteries, effacer les événements non liés aux instructions, etc.

8, détruit

　 Exemple La fonction qui sera exécutée après avoir été détruite peut également faire le travail ultérieur.

C'est à peu près 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 pour développer comme Vue. Il a également sa propre fonction de hook de cycle de vie.

<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>
console这样一个输出顺序：

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!