Vue.js Lifecycle-Hooks: der komplette Leitfaden für Vue 3

Vue.js ist ein beliebtes JavaScript-Framework für den Bau von Webanwendungen. Es ist so angelegt, dass es sich leicht benutzen und verstehen lässt, weshalb Einsteiger wie erfahrene Entwickler gern damit arbeiten. Einer der wichtigsten Bausteine von Vue.js sind die Lifecycle-Hooks: Über sie steuerst du, wie sich deine Komponenten verhalten, wenn sie in den Komponentenbaum eingehängt, aktualisiert oder wieder daraus entfernt werden.

Was ist ein Lifecycle-Hook in Vue.js?

Ein Lifecycle-Hook in Vue.js ist eine Funktion, die zu bestimmten Zeitpunkten aufgerufen wird: wenn die Komponente erzeugt, aktualisiert oder entfernt wird. Über diese Hooks legst du fest, was in jeder Phase des Komponentenlebenszyklus passieren soll, etwa Variablen initialisieren, asynchrone Methoden aufrufen oder Ressourcen aufräumen.

Die gebräuchlichsten Lifecycle-Hooks

Vue.js kennt mehrere Lifecycle-Hooks, am häufigsten kommen diese zum Einsatz:

• setup: läuft vor allen anderen Hooks und ist der Einstiegspunkt für die Composition API, sei es in Komponenten ohne Build-Schritt oder um Composition-API-Code in eine Komponente mit Options API einzubinden.
• created: wird aufgerufen, nachdem die Komponente erzeugt und ihre Eigenschaften initialisiert wurden
• mounted: wird aufgerufen, sobald die Komponente in der Seite hängt und ihr Rendering abgeschlossen ist
• updated: wird aufgerufen, wenn die Komponente neue Daten bekommt
• destroyed: wird aufgerufen, wenn die Komponente zerstört und ihre Ressourcen aufgeräumt werden

So setzt du Lifecycle-Hooks ein

Lifecycle-Hooks zu benutzen ist in Vue.js unkompliziert. Du definierst sie, indem du dem Options-Objekt deiner Vue-Komponente eine Methode hinzufügst. Soll zum Beispiel etwas passieren, sobald die Komponente eingehängt ist, ergänzt du das Options-Objekt um folgende Methode:

mounted () {
  // Code, der beim Einhängen der Komponente läuft
}

Lifecycle-Hooks in der Praxis

Angenommen, du hast eine Komponente, die eine Artikelliste aus einer API anzeigt. Mit den Lifecycle-Hooks erledigst du dann Folgendes:

• Im Hook created rufst du die API auf, um die Artikel zu holen
• Im Hook mounted zeigst du die Artikel mit v-for auf der Seite an
• Im Hook updated prüfst du, ob sich die Daten geändert haben, und rufst die API bei Bedarf erneut auf
• Im Hook destroyed räumst du Ressourcen wie Event-Abos auf, damit kein Speicher leckt.

Hier ein konkretes Beispiel, wie du mit den Lifecycle-Hooks eine Artikelliste anzeigst:

<template>
  <div>
    <ul>
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      articles: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      // API aufrufen, um die Artikel zu holen
    }
  },
  updated () {
    if (this.articles.length === 0) {
      this.fetchData()
    }
  },
  destroyed () {
    // Ressourcen hier aufräumen
  }
}
</script>

FAQ zu den Lifecycle-Hooks von Vue.js

Fazit

Die Lifecycle-Hooks von Vue.js sind ein mächtiges Werkzeug, wenn du steuern willst, wie deine Komponenten auf die verschiedenen Ereignisse reagieren. Über sie legst du fest, was zu welchem Zeitpunkt im Lebenszyklus deiner Komponente passiert: Variablen initialisieren, asynchrone Methoden aufrufen, Ressourcen aufräumen. Sieh dir die einzelnen Hooks in Ruhe an, es lohnt sich für deine tägliche Arbeit.