Vue3 Lifecycle-Hooks

In Vue.js sind Lifecycle-Hook-Funktionen eine Reihe von Methoden, die von Vue während der Erstellung, Aktualisierung, Zerstörung und anderer Prozesse einer Komponenteninstanz automatisch aufgerufen werden. Während dieser Schritte löst die Komponente eine Reihe von Funktionen aus, die "Lifecycle-Hooks" genannt werden, und ermöglicht Entwicklern, benutzerdefinierten Code zu bestimmten Zeiten auszuführen.

Registrierung und Verwendung von Lifecycle-Hooks

mounted-Hook: Dieser Hook wird ausgelöst, nachdem die Komponente ihr anfängliches Rendering abgeschlossen und DOM-Knoten generiert hat. Zum Beispiel:

export default {
  mounted() {
    console.log(`组件已挂载。`);
  }
}

Weitere gängige Hooks: Neben mounted gibt es auch Hooks wie updated und unmounted, die in verschiedenen Lebenszyklusphasen der Instanz aufgerufen werden.

Hinweise zu Lifecycle-Hooks

this-Kontext:In allen Lifecycle-Hook-Funktionen zeigt `this` automatisch auf die Komponenteninstanz, die ihn aufruft.

Arrow-Funktionen vermeiden:Verwenden Sie beim Definieren von Lifecycle-Hooks keine Arrow-Funktionen, da dies den Zugriff auf die Komponenteninstanz über `this` unmöglich macht.

Durch die angemessene Verwendung von Lifecycle-Hooks können Entwickler in verschiedenen Phasen einer Komponente bestimmte Logik ausführen und so die Flexibilität und Funktionalität der Komponente verbessern.

Unten sehen Sie ein Diagramm des Instanz-Lebenszyklus:

Die folgenden sind die Vue.js-Lifecycle-Hook-Funktionen

Hook-NameAuslösezeitpunkt
beforeCreateWird nach der Initialisierung der Instanz aufgerufen, vor der Datenbeobachtung und Event-Konfiguration.
createdWird unmittelbar nach dem Erstellen der Instanz aufgerufen. Zu diesem Zeitpunkt hat die Instanz die Datenbeobachtung, die Berechnung von Eigenschaften und Methoden sowie Watch-/Event-Callbacks abgeschlossen.
beforeMountWird aufgerufen, bevor das Mounting beginnt: Die relevante Render-Funktion wird zum ersten Mal aufgerufen.
mountedelDurch das neu erstelltevm.$elersetzt, und dieser Hook wird aufgerufen, nachdem er an die Instanz gemountet wurde.
beforeUpdateWird aufgerufen, wenn Daten aktualisiert werden, bevor das virtuelle DOM neu gerendert und gepatcht wird.
updatedWird aufgerufen, nachdem das virtuelle DOM aufgrund von Datenänderungen neu gerendert und gepatcht wurde.
beforeUnmountWird aufgerufen, bevor die Instanz unmountet wird.
unmountedWird aufgerufen, nachdem die Instanz ausgehängt wurde.

Das Folgende ist eine ausführliche Einführung in die Lifecycle-Hooks von Vue-Komponenten:

In Vue.js bezeichnen Lifecycle-Hook-Funktionen eine Reihe von Methoden, die Vue während der Erstellung, Aktualisierung, Zerstörung und anderer Prozesse einer Komponenteninstanz automatisch aufruft. Durch diese Hook-Funktionen können an verschiedenen Lifecycle-Phasen einer Komponente bestimmte Operationen ausgeführt werden. Das Folgende ist eine ausführliche Einführung in die Lifecycle-Hooks von Vue-Komponenten:

1. beforeCreate

  • Beschreibung: Wird aufgerufen, nachdem die Instanz initialisiert wurde, bevor Datenbeobachtung und Event-Konfiguration erfolgen.
  • Verwendung: In dieser Phase können Sie einige Daten initialisieren, die nicht von Vue geproxied werden.

Beispiel:

Beispiel

beforeCreate() {
  console.log('beforeCreate:Instanz wurde gerade erstellt');
}

2. created

  • Beschreibung: Wird unmittelbar nach der Erstellung der Instanz aufgerufen. Zu diesem Zeitpunkt hat die Instanz die folgenden Konfigurationen abgeschlossen: Datenbeobachtung, Berechnung von Eigenschaften und Methoden sowie Watch-/Event-Callbacks; die Mounting-Phase hat noch nicht begonnen.
  • Verwendung: In dieser Phase können Sie auf Daten zugreifen und sie ändern, aber das DOM ist noch nicht gemountet.

Beispiel:

Beispiel

created() {
  console.log('created:Instanzerstellung abgeschlossen');
}

3. beforeMount

  • Beschreibung: Wird aufgerufen, bevor das Mounting beginnt: Die relevante Render-Funktion wird zum ersten Mal aufgerufen.
  • Verwendung: Führen Sie vor dem Mounten einige Operationen aus, wie zum Beispiel das Ändern der DOM-Struktur usw.

Beispiel:

Beispiel

beforeMount() {
  console.log('beforeMount:Bevor das Mounten beginnt');
}

4. mounted

  • Beschreibung: elDurch das neu erstelltevm.$elersetzt, und dieser Hook wird aufgerufen, nachdem er an die Instanz gemountet wurde.
  • Verwendung: In dieser Phase können Sie das DOM manipulieren und DOM-bezogene Logik ausführen.

Beispiel:

Beispiel

mounted() {
  console.log('mounted:Instanz gemountet');
}

5. beforeUpdate

  • Beschreibung: Wird aufgerufen, wenn Daten aktualisiert werden, bevor das virtuelle DOM neu gerendert und gepatcht wird.
  • Verwendung: In dieser Phase können Sie auf den Zustand vor der Aktualisierung zugreifen.

Beispiel:

Beispiel

beforeUpdate() {
  console.log('beforeUpdate:Vor der Datenaktualisierung');
}

6. updated

  • Beschreibung: Wird aufgerufen, nachdem das virtuelle DOM aufgrund von Datenänderungen neu gerendert und gepatcht wurde.
  • Verwendung: In dieser Phase können Sie das DOM manipulieren, aber vermeiden Sie es, währenddessen Daten zu ändern, da dies eine Endlosschleife von Aktualisierungen verursachen kann.

Beispiel:

Beispiel

updated() {
  console.log('updated:Datenaktualisierung abgeschlossen');
}

7. beforeUnmount（Vue 3）

  • Beschreibung: Wird aufgerufen, bevor die Instanz entfernt wird.
  • Verwendung: Führe einige Aufräumoperationen aus, bevor die Instanz unmountet wird, wie z. B. das Entfernen von Event-Listenern usw.

Beispiel:

Beispiel

beforeUnmount() {
  console.log('beforeUnmount:Vor dem Unmounten der Instanz');
}

8. unmounted（Vue 3）

  • Beschreibung: Wird aufgerufen, nachdem die Instanz unmountet wurde.
  • Verwendung: Führe einige Aufräumoperationen aus, nachdem die Instanz unmountet wurde, wie z. B. das Zerstören von Timern usw.

Beispiel:

Beispiel

unmounted() {
  console.log('unmounted:Instanz unmountet');
}

Ausführungsreihenfolge der Lifecycle-Hooks

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate (ausgelöst, wenn sich Daten ändern)
  6. updated (ausgelöst, wenn sich Daten ändern)
  7. beforeUnmount
  8. unmounted

Beispiel

Das Folgende ist ein vollständiges Vue-Komponentenbeispiel, das die Verwendung aller Lifecycle-Hook-Funktionen demonstriert:

Beispiel

const LifecycleDemo = {
  template: `<div>{{ message }}</div>`,
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate:Instanz wurde gerade erstellt');
  },
  created() {
    console.log('created:Instanzerstellung abgeschlossen');
  },
  beforeMount() {
    console.log('beforeMount:Bevor das Mounten beginnt');
  },
  mounted() {
    console.log('mounted:Instanz gemountet');
  },
  beforeUpdate() {
    console.log('beforeUpdate:Vor der Datenaktualisierung');
  },
  updated() {
    console.log('updated:Datenaktualisierung abgeschlossen');
  },
  beforeUnmount() {
    console.log('beforeUnmount:Vor dem Unmounten der Instanz');
  },
  unmounted() {
    console.log('unmounted:Instanz unmountet');
  }
};

const app = Vue.createApp({
  components: {
    LifecycleDemo
  }
});

app.mount('#app');

Ausprobieren »

Dieses Beispiel gibt die Logs jeder Lifecycle-Hook-Funktion in der Konsole aus und hilft, die Reihenfolge und den Zweck jeder Lifecycle-Phase zu verstehen.

Composition-API-Hooks

Vue 3 führt die Composition API ein (Composition API), durch diesetupFunktion lassen sich Lifecycle-Hooks in Bezug auf die Logik klarer organisieren. Bei der Verwendung der Composition API werden diese Hooks durch dieonXxxFunktion verfolgen:

  • onMounted: entsprichtmounted。
  • onBeforeUnmount: entsprichtbeforeUnmount。
  • onUnmounted: entsprichtunmounted。
  • onBeforeMount: entsprichtbeforeMount。
  • onBeforeUpdate: entsprichtbeforeUpdate。
  • onUpdated: entsprichtupdated。
  • onCreatedundonBeforeCreateSie werden in der Composition API im Allgemeinen nicht häufig verwendet, weilsetupder Code darin während der Erstellungsphase ausgeführt wird.

Lifecycle-Hooks mit der Composition API:

Beispiel

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Komponente eingebunden!');
      // Initialisierung hier durchführen
    });

    onBeforeUnmount(() => {
      console.log('Komponente wird gleich entfernt!');
      // Bereinigung hier durchführen
    });
  }
};

Vorteile der Composition API:

  • Starke Wiederverwendbarkeit: Lifecycle-Hooks können mit anderer Logik kombiniert werden, wodurch sie leicht gekapselt und wiederverwendet werden können.
  • Klarere Logik: Mitsetupder darin enthaltenen anderen Logik, die in einer Funktion implementiert ist, wodurch Code-Zersplitterung und Komplexität reduziert werden.
Andere Erweiterungen