Vue.js is een populair JavaScript-framework om webapplicaties mee te bouwen. Het is opgezet om makkelijk te gebruiken en te doorgronden te zijn, en dat maakt het aantrekkelijk voor beginnende én ervaren developers. Een van de belangrijkste onderdelen van Vue.js is het systeem van lifecycle hooks: daarmee stuur je hoe je componenten reageren op gebeurtenissen als het opbouwen, bijwerken en afbreken van de componentenboom.
Wat is een lifecycle hook in Vue.js?
Een lifecycle hook in Vue.js is een functie die op vaste momenten wordt aangeroepen: wanneer het component wordt aangemaakt, bijgewerkt of verwijderd. Met die hooks leg je vast welke acties in elke fase van de levensduur van een component moeten gebeuren, zoals variabelen initialiseren, asynchrone methodes aanroepen en resources opruimen.
De meestgebruikte lifecycle hooks
Vue.js kent verschillende lifecycle hooks, maar deze kom je het vaakst tegen:
setup: setup() draait vóór alle andere hooks en is het startpunt voor de Composition API in een component, zonder buildstap, of om code op basis van de Composition API in een component met de Options API te gebruiken.created: aangeroepen nadat het component is aangemaakt en zijn properties zijn geïnitialiseerdmounted: aangeroepen zodra het component in de pagina is gemount en de rendering klaar isupdated: aangeroepen zodra het component met nieuwe data wordt bijgewerktdestroyed: aangeroepen wanneer het component wordt vernietigd en zijn resources worden opgeruimd
Lifecycle hooks gebruiken
Lifecycle hooks inzetten is eenvoudig in Vue.js. Je definieert ze door een methode aan het options-object van je Vue-component toe te voegen. Wil je bijvoorbeeld iets laten gebeuren zodra het component gemount is, dan voeg je deze methode aan dat options-object toe:
mounted () {
// code die draait zodra het component gemount is
}Voorbeeld: lifecycle hooks in de praktijk
Stel dat je een component hebt dat een lijst artikelen uit een API toont. Met de lifecycle hooks regel je het volgende:
- In de hook
createdroep je de API aan om de artikelen op te halen - In de hook
mountedzet je de artikelen op de pagina metv-for - In de hook
updatedcontroleer je of de data is veranderd en roep je de API zo nodig opnieuw aan - In de hook
destroyedruim je resources op, zoals abonnementen op events, om geheugenlekken te voorkomen.
Hier is een concreet voorbeeld waarin de lifecycle hooks een lijst artikelen tonen:
<template>
<div>
<ul>
<li v-for="article in articles" :key="article.id">{{ article.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
articles: []
}
},
created () {
this.fetchData()
},
methods: {
fetchData () {
// de API aanroepen om de artikelen op te halen
}
},
updated () {
if (this.articles.length === 0) {
this.fetchData()
}
},
destroyed () {
// ruim hier de resources op
}
}
</script>Veelgestelde vragen over de lifecycle hooks van Vue JS
In welke volgorde draaien de lifecycle hooks van Vue JS?
In Vue 3 draaien de lifecycle hooks in deze volgorde: beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed.
Kan ik meerdere lifecycle hooks in één component gebruiken?
Ja, je kunt meerdere lifecycle hooks in hetzelfde component gebruiken. Dat komt van pas wanneer je het gedrag van een component op verschillende momenten in zijn levensduur wilt volgen en sturen.
Zijn er lifecycle hooks die je niet samen kunt gebruiken?
Nee, er zijn geen beperkingen op het combineren van lifecycle hooks. Wel horen sommige hooks bij een bepaalde fase: beforeDestroy bijvoorbeeld draait pas nadat het component is aangemaakt, en alleen vlak voordat het wordt vernietigd.
Conclusie
De lifecycle hooks van Vue.js zijn krachtig gereedschap voor developers die willen sturen hoe hun componenten op verschillende gebeurtenissen reageren. Met die hooks laat je op precieze momenten in de levensduur van je component iets gebeuren: variabelen initialiseren, asynchrone methodes aanroepen, resources opruimen. Neem de verschillende lifecycle hooks van Vue.js gerust een voor een door, je code wordt er beter van.
