Eine kurze Einführung in die Hook-Funktionen des Vue-Lebenszyklus (Codebeispiel)

Dieser Artikel bietet Ihnen eine kurze Einführung (Codebeispiel) über die Vue-Lebenszyklus-Hook-Funktion. Ich hoffe, dass er für Sie hilfreich ist.

Beginnen wir mit einem Bild

Das folgende Bild ist das offiziell angezeigte Lebenszyklusdiagramm

Die Lebenszyklus-Hook-Funktion von Vue Instanz (8)
1. beforeCreate
Ich habe gerade eine neue Komponente erstellt und kann nicht auf die Daten und den echten Dom zugreifen.
2 Das Datenattribut wurde erstellt Es wird ein Wert zugewiesen, und die Daten werden nicht aktualisiert. Sie können die ursprünglichen Daten hier abrufen.
Render ist bereit zum Rendern. Die Daten werden geändert Zu diesem Zeitpunkt wird keine Aktualisierung ausgelöst. Hier können Sie die Anfangsdaten abrufen.
4. Gemountet
startet das Rendern, rendert das echte DOM, führt die gemountete Hook-Funktion aus, die Komponente wurde auf der Seite angezeigt und die Daten und Ereignisse werden alle vom DOM verarbeitet. Hier können Sie echte DOM-Operationen ausführen
5. beforeUpdate
Komponente, eine Funktion, die ausgeführt wird, bevor die Instanzdaten aktualisiert werden. Das virtuelle DOM erstellt das virtuelle DOM neu und rendert es erneut das letzte virtuelle DOM. Denken Sie daran, die Daten nicht zu ändern, da sonst eine Endlosschleife auftritt.
aktualisiert
ist eine Funktion, die nach der Aktualisierung ausgeführt wird. Denken Sie daran, die Daten nicht zu ändern, da sonst eine Endlosschleife auftritt
7 🎜>Bevor die Instanz zerstört wird, werden Nacharbeiten ausgeführt, Timer gelöscht, nicht anweisungsgebundene Ereignisse gelöscht usw.
8. zerstört
Funktionen, die nach der Zerstörung der Instanz ausgeführt werden und auch können Nacharbeit leisten.

<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>

Konsole hat diese Ausgabesequenz:

Dies ist ungefähr die Reihenfolge, in der Lebenszyklus-Hook-Funktionen ausgeführt werden, einschließlich der Tatsache, dass ich Angular to verwendet habe Entwickelt sich wie Vue zuvor und verfügt auch über eine eigene Life-Cycle-Hook-Funktion.

Der Lebenszyklus ist einfach ein Prozess von der Erstellung über die Initialisierung bis zur Zerstörung einer Komponente. In diesem Prozess können wir mit diesen Lebenszyklus-Hook-Funktionen die gesamte Komponente bequemer bedienen.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in die Hook-Funktionen des Vue-Lebenszyklus (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!