Lebenszyklusmethoden in Vue 3

Einführung

Vue 3, das progressive JavaScript-Framework, bietet Entwicklern eine Reihe robuster Tools zum Erstellen dynamischer und reaktiver Webanwendungen. Eine der Kernfunktionen von Vue sind seine Lebenszyklusmethoden, die es Entwicklern ermöglichen, in verschiedene Phasen des Lebenszyklus einer Komponente einzusteigen. Diese Methoden sind sowohl in der Options-API als auch in der Composition-API verfügbar und bieten Flexibilität bei der Strukturierung Ihres Codes.

In diesem Artikel untersuchen wir die in Vue 3 verfügbaren Lebenszyklusmethoden, vergleichen ihre Verwendung in der Options-API und der Composition-API und stellen praktische Beispiele zur Veranschaulichung ihrer Anwendung bereit.

Inhalt

Options-API vs. Kompositions-API

In Vue 3 können Sie Lebenszyklusmethoden entweder mithilfe der Options-API oder der Composition-API definieren. Die Options-API ist die traditionelle Methode zum Definieren von Komponentenoptionen, während die Composition-API einen flexibleren und modulareren Ansatz bietet, der besonders für komplexe Anwendungen nützlich ist.

Lebenszyklusmethoden

Unten finden Sie ein Diagramm, das die Lebenszyklusphasen einer Vue-Komponente veranschaulicht:

beforeCreate

• Options-API: Nicht erforderlich
• Kompositions-API: Nicht erforderlich

Dieser Hook wird aufgerufen, bevor die Komponenteninstanz erstellt wird.

erstellt

• Options-API: Nicht erforderlich
• Kompositions-API: Nicht erforderlich

Dieser Hook wird aufgerufen, nachdem die Komponenteninstanz erstellt wurde.

beforeMount

• Options-API: beforeMount
• Kompositions-API: onBeforeMount

Dieser Hook wird direkt vor dem Mounten der Komponente im DOM aufgerufen.

Beispiel:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

montiert

• Options-API: gemountet
• Kompositions-API: onMounted

Dieser Hook wird aufgerufen, wenn die Komponente im DOM gemountet wird.

Beispiel:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

vorUpdate

• Options-API: beforeUpdate
• Kompositions-API: onBeforeUpdate

Dieser Hook wird aufgerufen, bevor die Komponente aktualisiert wird.

Beispiel:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

aktualisiert

• Options-API: aktualisiert
• Kompositions-API: onUpdated

Dieser Hook wird nach den Komponentenaktualisierungen aufgerufen.

Beispiel:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

beforeUnmount

• Options-API: beforeUnmount
• Composition API: onBeforeUnmount

Dieser Hook wird unmittelbar vor dem Aushängen der Komponente aufgerufen.

Beispiel:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

unmontiert

• Options-API: nicht gemountet
• Composition API: onUnmounten

Dieser Hook wird aufgerufen, nachdem die Komponente ausgehängt wurde.

Beispiel:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

errorCaptured

• Options-API: errorCaptured
• Kompositions-API: onErrorCaptured

Dieser Hook wird aufgerufen, wenn ein Fehler von einer untergeordneten Komponente erfasst wird.

Beispiel:

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

renderTracked

• Options-API: renderTracked
• Kompositions-API: onRenderTracked

Dieser Hook wird aufgerufen, wenn beim Rendern eine reaktive Abhängigkeit verfolgt wird.

Beispiel:

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

renderTriggered

• Options-API: renderTriggered
• Kompositions-API: onRenderTriggered

Dieser Hook wird aufgerufen, wenn eine reaktive Abhängigkeit ein Rendern auslöst.

Beispiel:

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

Zusammenfassung

Das Verstehen und Verwenden der Lebenszyklusmethoden in Vue 3 ist entscheidend für die Verwaltung der verschiedenen Phasen des Lebenszyklus einer Komponente. Unabhängig davon, ob Sie die Options-API oder die Composition-API bevorzugen, bietet Vue 3 einen umfassenden Satz von Hooks, mit denen Sie das Verhalten Ihrer Komponente effektiv steuern können. Durch die Beherrschung dieser Lebenszyklusmethoden können Sie effizientere und wartbarere Vue-Anwendungen erstellen.

Viel Spaß beim Codieren! ?

Wenn Sie Fragen haben, können Sie mich gerne fragen!

Wenn Ihnen mein Beitrag gefällt, unterstützen Sie mich unter:

---

Das obige ist der detaillierte Inhalt vonLebenszyklusmethoden in Vue 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!