Overzicht van lifecyclefasen
Aanmaken, mounten, updaten, unmounten — wat er in elke fase gebeurt.
Overzicht van lifecyclefasen is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Een component heeft een levenscyclus
Elke Vue-component doorloopt een voorspelbare reis: hij wordt aangemaakt, aan de pagina gekoppeld, bijgewerkt wanneer gegevens veranderen en uiteindelijk verwijderd. Dit zijn de fasen van de levenscyclus, en met Vue kun je op elke fase inhaken.
De vier fasen
- Aanmaken — setup wordt uitgevoerd en reactiviteit wordt geïnitialiseerd.
- Mounten — de DOM wordt aangemaakt en ingevoegd.
- Bijwerken — reactieve wijzigingen starten nieuwe renderbewerkingen.
- Unmounten — de component wordt verwijderd en opgeruimd.
Fase 1: aanmaken
Eerst wordt de componentinstantie aangemaakt en de reactiviteit ingesteld. In de Composition API wordt <script setup> (of setup()) hier uitgevoerd. De DOM bestaat nog niet, dus je kunt op dit moment geen elementen uitlezen.
Wat je tijdens het aanmaken kunt doen
Tijdens het aanmaken kun je goed reactieve status declareren en werk starten waarvoor de DOM niet nodig is, zoals het beginnen met gegevens ophalen. Onthoud wel dat de template nog niet is gerenderd, dus DOM-refs zijn nog leeg.
<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>Fase 2: mounten
Vervolgens maakt Vue de werkelijke DOM-elementen van je template aan en voegt die aan de pagina toe. Na het mounten verwijzen refs in de template naar echte elementen en kun je de DOM opmeten of aanpassen.
De mount-hook
onMounted wordt één keer uitgevoerd, direct nadat de component is ingevoegd. Dit is de juiste plek voor DOM-afhankelijke initialisatie, zoals een grafiek initialiseren of een invoerveld focus geven.
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('in the DOM now')
})
</script>Fase 3: bijwerken
Wanneer reactieve gegevens waarvan een component afhankelijk is veranderen, rendert Vue opnieuw en werkt het de DOM efficiënt bij — alleen de gewijzigde delen. Deze bijwerkcyclus kan zich tijdens de levensduur van een component vaak herhalen.
De update-hooks
onBeforeUpdate wordt uitgevoerd vlak voordat de DOM wordt bijgewerkt en onUpdated vlak erna. Ze worden uitgevoerd bij elke reactieve wijziging die de weergave beïnvloedt.
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM patched')
})
</script>Fase 4: unmounten
Wanneer een component wordt verwijderd — via v-if, een routewijziging of het verwijderen uit een lijst — ruimt Vue de component op. Dit is je kans om timers, listeners en abonnementen op te ruimen en geheugenlekken te voorkomen.
De unmount-hook
onUnmounted wordt uitgevoerd nadat de component is verdwenen. Annuleer hier intervallen, verwijder globale listeners en breek lopende aanvragen af.
<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>De volledige volgorde
De hooks worden tijdens de levensduur van een component in deze volgorde uitgevoerd: setup, onBeforeMount, onMounted, daarna herhaalde paren van onBeforeUpdate/onUpdated en ten slotte onBeforeUnmount/onUnmounted.
Korte toets
Controleer of je de levenscyclus begrijpt.
Samenvatting
Je hebt nu het volledige plaatje:
- Aanmaken: setup wordt uitgevoerd, reactiviteit is klaar, geen DOM.
- Mounten: de DOM wordt aangemaakt en ingevoegd; refs worden bruikbaar.
- Bijwerken: een reactieve wijziging activeert een efficiënte bijwerking.
- Unmounten: de component wordt verwijderd; ruim hier alles op.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Overzicht van lifecyclefasen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Overzicht van lifecyclefasen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Overzicht van lifecyclefasen”?
Aanmaken, mounten, updaten, unmounten — wat er in elke fase gebeurt. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Overzicht van lifecyclefasen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Overzicht van lifecyclefasen
- onMounted en onBeforeMount
- onUpdated en onBeforeUpdate
- onUnmounted en cleanup-patronen