Was ist die Lebenszyklus-Hook-Funktion von Vue?

In Vue beziehen sich Lebenszyklus-Hook-Funktionen auf einige Funktionen, die ausgeführt werden, wenn der Lebenszyklus den Prozess der Erstellung und Aktualisierung des DOM durchläuft. Innerhalb dieser Funktionen können Komponenten erstellt und deklariert werden.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist die Lebenszyklus-Hook-Funktion von Vue?

Jede Vue-Instanz durchläuft eine Reihe von Initialisierungsschritten. Vom Festlegen der Daten bei der Erstellung über das Kompilieren der Vorlage, das Laden der Instanz in das DOM und schließlich die Aktualisierung des DOM bei Datenänderungen. Dieser Prozess wird als Lebenszyklus einer Vue-Instanz bezeichnet. Während sie den Prozess der Erstellung und Aktualisierung des DOM durchlaufen, werden in ihnen einige Funktionen erstellt und deklariert Der Lebenszyklus.

Vue verfügt über acht Lebenszyklusmethoden:

• Vor dem Erstellen

• Erstellt

• Vor dem Mounten

• Montiert

• Vor dem Update

• Aktualisiert

• Vor der Zerstörung

• Zerstört

In diesem Artikel erfahren Sie mehr über all diese Haken und Beispiele für jede Phase.

In diesem Artikel wird die Testkomponente verwendet, die sich im Komponentenordner im src-Ordner befindet. Es sollte so aussehen:

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

In diesem Tutorial wird der Skriptabschnitt einzeln für verschiedene Hook-Fälle verwendet.

beforeCreate()

Dies ist der erste Lifecycle-Hook, der in Vue.js aufgerufen wird. Er wird unmittelbar nach der Initialisierung der Vue-Instanz aufgerufen.

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

Sie können das Programm in der Entwicklungsumgebung ausführen, um die Schnittstelle zu überprüfen.

npm run serve

Beachten Sie, dass vor dem Laden der Komponente zunächst die im Lebenszyklus-Hook geschriebene Warnanweisung ausgeführt wird. Genau so verhält sich die Funktion, wenn sie aufgerufen wird, bevor die Vue-Engine die Anwendungskomponente erstellt. Zu diesem Zeitpunkt befindet es sich in der Phase beforeCreate und die berechneten Eigenschaften, Beobachter, Ereignisse, Dateneigenschaften, Operationen usw. wurden noch nicht festgelegt.

created()

Wie Sie vermutet haben, ist dies der zweite Lifecycle-Hook, der unmittelbar nach dem beforeCreated-Hook aufgerufen wird. Zu diesem Zeitpunkt wurde die Vue-Instanz initialisiert und verfügt über berechnete Eigenschaften, Beobachter, Ereignisse, Dateneigenschaften und nachfolgende Vorgänge.

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

Wenn Sie das Programm ausführen, werden Sie sehen, dass die Datentypen jetzt angezeigt werden. Dies ist in der Phase beforeCreated nicht möglich, da die dann erfolgende Aktivierung noch nicht erfolgt ist. Allerdings ist die Vue-Instanz zu diesem Zeitpunkt noch nicht installiert, sodass Sie das DOM hier nicht manipulieren können, Elementeigenschaften sind noch nicht verfügbar.

beforeMount()

Dies ist der Moment, bevor die Instanz im DOM bereitgestellt wird. Vorlagen und bereichsbezogene Stile werden hier kompiliert, aber Sie können das DOM immer noch nicht manipulieren und Elementattribute sind immer noch nicht verfügbar.

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

montiert()

Dies ist der nächste Lebenszyklus-Hook, der nach beforeMounted aufgerufen wird. Der Aufruf erfolgt unmittelbar nach der Installation der Instanz. Jetzt können die App-Komponente oder andere Komponenten im Projekt verwendet werden. Es ist jetzt möglich, Vorgänge wie das Anpassen von Daten an Vorlagen oder das Ersetzen von DOM-Elementen durch mit Daten gefüllte Elemente durchzuführen, und Elementattribute sind jetzt verfügbar.

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

Dies ist der Standardspeicherort für Projekte, die mit der Vue-CLI erstellt wurden, da die Installation, wie wir zu Beginn gesehen haben, bereits in der Datei main.js erfolgt. Aus diesem Grund können Sie möglicherweise keine anderen Hooks verwenden, da die Instanz bereits standardmäßig für Sie installiert ist.

beforeUpdate()

Nehmen Sie hier Änderungen an den Daten vor, die aktualisiert werden müssen. Diese Phase eignet sich für jede Logik, bevor Änderungen vorgenommen werden, z. B. das Entfernen von Ereignis-Listenern.

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

Zunächst gibt es eine willkommene Anmerkung zum DOM, aber während der Mount-Phase (in der das DOM manipuliert werden kann) ändern sich die Daten, sodass die Warnung beforeUpdate vor der Änderung erscheint.

updated()

Dieser Lifecycle-Hook wird unmittelbar nach einem Update des DOM aufgerufen, er wird ausgeführt, nachdem der beforeUpdate-Hook aufgerufen wurde. Es ist hier möglich, DOM-bezogene Vorgänge auszuführen, es wird jedoch nicht empfohlen, den Status innerhalb dieses Hooks zu ändern, da Vue bereits eine Plattform speziell dafür bereitstellt.

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

Der Zeitpunkt zum Aufrufen dieses Vue-Lebenszyklus-Hooks liegt vor der Zerstörung der Vue-Instanz, während die Instanz und alle Funktionen noch intakt sind und dort funktionieren. In dieser Phase können Sie die Ressourcenverwaltung durchführen, Variablen löschen und Komponenten bereinigen.

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

destroyed()

Dies ist die letzte Phase des Vue-Lebenszyklus, in der alle untergeordneten Vue-Instanzen zerstört wurden und Dinge wie Ereignis-Listener und alle Anweisungen zu diesem Zeitpunkt entbunden wurden. Rufen Sie dies auf, nachdem Sie destroy für das Objekt ausgeführt haben.

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

Wenn Sie das Programm ausführen und auf die Konsole schauen, werden Sie nichts sehen.

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonWas ist die Lebenszyklus-Hook-Funktion von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!