onUpdated and onBeforeUpdate in Vue - Mini Project: Build & Apply

Using onUpdated and onBeforeUpdate in Vue 3

📖 Scenario: You are building a simple Vue 3 app that shows a counter. You want to see messages in the console right before the component updates and right after it updates. This helps you understand when Vue updates the screen.

🎯 Goal: Create a Vue 3 component that uses onBeforeUpdate and onUpdated lifecycle hooks to log messages to the console when the counter changes.

📋 What You'll Learn

Create a reactive counter variable starting at 0

Add a button to increase the counter by 1 when clicked

Use onBeforeUpdate to log 'Before update: counter is X' where X is the counter value

Use onUpdated to log 'Updated: counter is X' where X is the counter value

💡 Why This Matters

🌍 Real World

Developers often need to know when a component updates to perform side effects like animations, analytics, or syncing data.

💼 Career

Understanding Vue lifecycle hooks is essential for building interactive and efficient Vue applications in professional frontend development.

1

Set up the reactive counter

Create a Vue 3 component with a reactive variable called counter initialized to 0 using ref.

Vue

import { ref } from 'vue'

// Create a reactive variable called counter and set it to 0
// Your code here



  
    Counter: {{ counter }}
  

Need a hint?

Use ref(0) to create a reactive counter variable.

2

Add a button to increase the counter

Add a button inside the <template> that increases counter.value by 1 when clicked. Use @click event with an inline arrow function.

Vue

import { ref } from 'vue'

const counter = ref(0)



  
    Counter: {{ counter }}
    
    
  

Need a hint?

Use @click="counter.value++" on the button to increase the counter.

3

Use onBeforeUpdate to log before update

Import onBeforeUpdate from 'vue' and use it to log 'Before update: counter is ' + counter.value before the component updates.

Vue

import { ref, onBeforeUpdate } from 'vue'

const counter = ref(0)

// Use onBeforeUpdate to log before update
// Your code here



  
    Counter: {{ counter }}
    Increase
  

Need a hint?

Use onBeforeUpdate(() => { ... }) to run code before the update.

4

Use onUpdated to log after update

Import onUpdated from 'vue' and use it to log 'Updated: counter is ' + counter.value after the component updates.

Vue

import { ref, onBeforeUpdate, onUpdated } from 'vue'

const counter = ref(0)

onBeforeUpdate(() => {
  console.log('Before update: counter is ' + counter.value)
})

// Use onUpdated to log after update
// Your code here



  
    Counter: {{ counter }}
    Increase
  

Need a hint?

Use onUpdated(() => { ... }) to run code after the update.