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!