Lifecycle hooks

Lifecycle Hooks

Lesdoelen

• Begrijpen wat de levenscyclus van een Vue-component is.
• Inzicht krijgen in het concept van "mounten".
• Leren hoe je lifecycle hooks gebruikt in Vue 3 met de Composition API en <script setup>.
• Een eenvoudige timer-component bouwen als oefening.

Tijdsindeling

1. Introductie: Wat is de levenscyclus van een Vue-component? (10 minuten)

   • Uitleg van mounten en de componentlevenscyclus.
   • Visualisatie en eenvoudige metafoor.

2. Uitleg van Lifecycle Hooks (10 minuten)

   • Wat zijn lifecycle hooks en hoe gebruik je ze in Vue 3?
   • Focus op onMounted en onUnmounted.

3. Codevoorbeeld: Timer-component (10 minuten)

   • Samen bouwen van een eenvoudige timer met onMounted en onUnmounted in <script setup>.

4. Hands-on Oefening: Zelf aan de slag (10 minuten)

   • Een aangepaste versie van de timer bouwen met extra functionaliteiten.

Lesinhoud

1. Introductie: Wat is de levenscyclus van een Vue-component?

Elke Vue-component doorloopt een levenscyclus:

1. Aanmaken: Vue bereidt je component voor en verzamelt de data en methodes.
2. Mounten: Je component wordt toegevoegd aan de webpagina (DOM) en zichtbaar voor de gebruiker.
3. Bijwerken: Als de data in je component verandert, wordt de DOM opnieuw gerenderd.
4. Verwijderen: Je component wordt opgeruimd en uit de DOM verwijderd.

Wat betekent "mounten"?

• Mounten is het moment waarop Vue jouw component "plakt" in een specifiek HTML-element op de pagina.
• Voorbeeld: Een lege container <div id="app"></div> wordt gevuld met de inhoud van jouw component.

Visualisatie:

1. Voor het mounten:

   <div id="app"></div>
2. Na het mounten door Vue:

   <div id="app">
     <h1>Hallo, Vue!</h1>
   </div>

2. Uitleg van Lifecycle Hooks

Wat zijn lifecycle hooks?

• Lifecycle hooks zijn speciale functies die Vue automatisch aanroept op bepaalde momenten in de levenscyclus van een component.
• In Vue 3 gebruik je lifecycle hooks binnen de Composition API en <script setup>.

Belangrijke hooks voor beginners:

1. onMounted

   • Wordt uitgevoerd zodra het component gemount is.
   • Perfect voor API-calls, timers of DOM-interacties.

2. onUnmounted

   • Wordt uitgevoerd zodra het component wordt verwijderd.
   • Handig voor het opruimen van resources zoals timers of event listeners.

3. Codevoorbeeld: Timer-component

Samen bouwen we een eenvoudige timer-component die:

• De tijd elke seconde bijhoudt.
• De timer start bij het mounten (onMounted).
• De timer stopt bij het verwijderen (onUnmounted).

Code:

<template>
  <div>
    <h2>Teller: {{ counter }}</h2>
    <button @click="resetCounter">Reset</button>
    <button @click="pauseCounter">Pause</button>
  </div>
</template>

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

// Reactieve teller
const counter = ref(0);
let intervalId = null;

// Start de teller
const startCounter = () => {
  intervalId = setInterval(() => {
    counter.value++;
  }, 1000);
};

// Reset de teller
const resetCounter = () => {
  counter.value = 0;
};

// Pauzeer de teller
const pauseCounter = () => {
  clearInterval(intervalId);
};

// Start de timer bij het mounten
onMounted(() => {
  startCounter();
});

// Stop de timer bij het verwijderen
onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

4. Codevoorbeeld: Tour of heroes

Tour of heroes dashboard