Lifecycle Hooks ermöglichen es dir, Code zu bestimmten Momenten im Leben einer Komponente auszuführen — bei der Erstellung, beim Anheften an das DOM, beim Aktualisieren und beim Entfernen. In der Composition API sind sie Funktionen, die du in setup aufrufst.
Die wichtigsten Hooks in Reihenfolge
vue
<script setup>
import { onMounted, onUpdated, onUnmounted, ref } from "vue";
const data = ref(null);
onMounted(() => {
// component is now in the DOM — fetch data, access elements, init libraries
fetchData().then(d => (data.value = d));
});
onUpdated(() => {
// runs after the DOM re-renders due to a reactive change
});
onUnmounted(() => {
// component is being removed — CLEAN UP here
clearInterval(timer);
window.removeEventListener("resize", handler);
});
</script>