Wie man Methoden anwendet und die Lebenszyklusprinzipien von Vue 3 versteht

Prinzipübersicht

Der Lebenszyklus von Vue 3 bezieht sich auf eine Reihe von Ereignissen, die eine Komponente von der Erstellung bis zur Zerstörung durchläuft. Während dieser Ereignisse können einige Vorgänge ausgeführt werden, z. B. das Initialisieren von Daten, das Rendern von Ansichten, das Laden asynchroner Daten usw. In Vue 3 wird der Lebenszyklus der Komponente durch die Funktion setup() definiert.

Instanzanalyse

Der Lebenszyklus von Vue 3 umfasst die folgenden Phasen:

1. beforeCreate

wird aufgerufen, bevor die Instanz erstellt wird, also vor der Initialisierung. Zu diesem Zeitpunkt wurde die Komponenteninstanz noch nicht initialisiert und auf Attribute wie Daten, Methoden und Berechnungen kann nicht zugegriffen werden. Einige Vorgänge werden ausgeführt, bevor der Komponentenstatus initialisiert wird.

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2.created

wird aufgerufen, nachdem die Instanz erstellt wurde, also nach der Initialisierung. Zu diesem Zeitpunkt sind Konfigurationen wie die Datenbeobachtung abgeschlossen, das DOM wurde jedoch noch nicht gemountet, und auf Attribute wie Daten, Methoden und Berechnungen kann zugegriffen werden. Mit der erstellten Hook-Funktion können Sie Vorgänge wie Dateninitialisierung und Ereignisüberwachung ausführen.

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

wird aufgerufen, bevor die Montage beginnt. Zu diesem Zeitpunkt wurden die echten DOM-Knoten noch nicht gerendert. Sie können die Hook-Funktion beforeMount verwenden, um einige asynchrone Vorgänge auszuführen, bevor die Komponente bereitgestellt wird, z. B. das Laden von Animationen.

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4. Mounted

wird aufgerufen, nachdem die Montage abgeschlossen ist. Zu diesem Zeitpunkt hat die Komponente das echte DOM gerendert. Die gemountete Hook-Funktion wird häufig zum Initialisieren von DOM-Vorgängen und zum Auffüllen von Komponentendaten nach der Interaktion mit dem Server verwendet, z. B. zum Abrufen von DOM-Knoten über ref und zum Registrieren von Ereignis-Listenern.

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

wird aufgerufen, bevor die Daten aktualisiert werden. An dieser Stelle kann vor der Aktualisierung auf den alten Datenstand zugegriffen werden. Mit der Hook-Funktion beforeUpdate können Sie einige Vorgänge ausführen, bevor die Komponentendaten aktualisiert werden, z. B. die dynamische Bindung von Klasse und Stil usw.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6. aktualisiert

wird aufgerufen, nachdem die Daten aktualisiert wurden. Zu diesem Zeitpunkt hat die Komponente das DOM aktualisiert und kann DOM-Vorgänge abschließen, indem sie auf den neuesten Datenstatus zugreift. Mit der aktualisierten Hook-Funktion können Sie nach der Aktualisierung der Komponentendaten einige Vorgänge ausführen, z. B. das Auslösen von Animationseffekten usw.

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

wird aufgerufen, bevor die Komponente ausgehängt wird. Zu diesem Zeitpunkt ist die Komponenteninstanz noch vollständig verfügbar, ihre Ansicht wurde jedoch zerstört und wird nicht mehr aktualisiert. Sie können die Hook-Funktion beforeUnmount verwenden, um einige Bereinigungsvorgänge durchzuführen, bevor die Bereitstellung der Komponente aufgehoben wird, z. B. das Abbrechen von Ereignis-Listenern, Timern und asynchronen Anforderungen.

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8. unmontiert

wird aufgerufen, nachdem die Komponente ausgehängt wurde. Zu diesem Zeitpunkt sind die Komponenteninstanz und alle zugehörigen DOM-Elemente zerstört und auf die internen Daten und Methoden der Komponente kann nicht mehr zugegriffen werden. Sie können die Unmount-Hook-Funktion verwenden, um einige abschließende Bereinigungsvorgänge durchzuführen, nachdem die Komponente nicht gemountet wurde.

export default {
  unmounted() {
    console.log('unmounted');
  }
}

Es ist zu beachten, dass einige Lebenszyklusfunktionen in Vue 3 entfernt wurden, z. B. aktiviert, deaktiviert, errorCaptured usw., die über die neue Composition-API implementiert werden können.

Das obige ist der detaillierte Inhalt vonWie man Methoden anwendet und die Lebenszyklusprinzipien von Vue 3 versteht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!