Vue Lifecycle Hooks

Every Vue component instance goes through a series of initialization steps when it's created - setting up data observation, compiling the template, mounting the instance to the DOM, and updating the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving you the opportunity to add your own code at specific stages.

Common Lifecycle Hooks

onMounted

onMounted() is called after the component has been mounted to the DOM. This is the perfect place to:

• Access DOM elements
• Set up event listeners
• Fetch initial data
• Initialize third-party libraries

<script setup>
onMounted(() => {
  console.log('Component is now in the DOM!')
})
</script>

onUpdated

onUpdated() is called after the component has updated its DOM tree due to a reactive state change.

<script setup>
onUpdated(() => {
  console.log('Component has updated!')
})
</script>

onUnmounted

onUnmounted() is called after the component has been unmounted. Use it to clean up:

• Event listeners
• Timers and intervals
• Subscriptions
• Third-party library instances

<script setup>
let intervalId

onMounted(() => {
  intervalId = setInterval(() => {
    console.log('Tick')
  }, 1000)
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>

The Lifecycle Flow

1. Setup - Component is created, reactive state is set up
2. onMounted - Component is added to the DOM
3. onUpdated - Component re-renders due to state changes (can happen multiple times)
4. onUnmounted - Component is removed from the DOM

Challenge

Create a timer component that:

1. Starts counting seconds when the component is mounted
2. Updates the display every second
3. Shows a log message when the component updates
4. Cleans up the timer when unmounted

To complete the challenge:

1. Create a ref called seconds initialized to 0
2. In onMounted, set up an interval that increments seconds every 1000ms
3. Store the interval ID so you can clear it later
4. In onUnmounted, clear the interval
5. Optionally, add onUpdated to log when the component updates

If you get stuck, you can check the solution by clicking the button below.

Understanding lifecycle hooks is crucial for managing side effects and cleanup in Vue components. Next, we'll explore the Composition API in more depth.