Einführung in die Hook-Hook-Funktionen des Vue-Lebenszyklus (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Hook-Funktion des Vue-Lebenszyklus (mit Beispielen). Ich hoffe, dass er für Freunde in Not hilfreich ist.

Lebenszyklus-Hook-Funktionen von Vue-Instanzen (8)

1. beforeCreate

Ich habe gerade eine neue Komponente erstellt und kann grundsätzlich nicht auf die Daten und den realen Dom zugreifen , das scheint nutzlos zu sein

erstellt

Dem Datenattribut wurde ein Wert zugewiesen, aber die Aktualisierung erfolgt nicht. Hier können Sie die ursprünglichen Daten abrufen 🎜>

3. beforeMount

Das Rendern ist zum Rendern bereit. Das Ändern der Daten zu diesem Zeitpunkt löst keine Aktualisierung aus >

4. gemountet

Rendern starten, das echte DOM rendern, die gemountete Hook-Funktion ausführen, die Komponente ist auf der Seite erschienen und die Daten und Ereignisse wurden vom DOM verarbeitet. Hier können Sie echte DOM-Operationen ausführen

beforeUpdate

Komponente, eine Funktion, die ausgeführt wird, bevor die Instanzdaten aktualisiert werden. Das virtuelle DOM erstellt das virtuelle DOM neu das gleiche wie beim letzten virtuellen DOM. Nach dem Vergleich erneut rendern. Denken Sie daran, die Daten nicht zu ändern, da sonst eine Endlosschleife auftritt

6. Aktualisiert

Funktion, die nach der Aktualisierung ausgeführt wird. Denken Sie daran, die Daten nicht zu ändern, da sonst eine Endlosschleife auftritt

7. beforeDestroy

　 Funktion, die ausgeführt wird, bevor die Instanz zerstört wird, die Nacharbeit erledigt, Timer löscht, nicht anweisungsgebundene Ereignisse usw. löscht.

8, zerstört

　 Beispiel Die Funktion, die nach ihrer Zerstörung ausgeführt wird, kann auch die Nacharbeit erledigen.

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

Dies ist ungefähr die Reihenfolge, in der die Lebenszyklus-Hook-Funktionen ausgeführt werden, einschließlich der Tatsache, dass ich zuvor Angular zum Entwickeln verwendet habe, genau wie Vue, es hat auch eine eigene Lebenszyklus-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 vonEinführung in die Hook-Hook-Funktionen des Vue-Lebenszyklus (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!