How to Use onUpdated in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
The onUpdated lifecycle hook in Vue 3 Composition API is called after the component has been re-rendered due to reactive data changes. As the creator of CoreUI with over 11 years of Vue.js development experience, I use onUpdated for DOM measurements, scroll position adjustments, and third-party library updates that need to happen after Vue updates the DOM. This hook is useful when you need to access the updated DOM or perform actions based on data changes.
Use onUpdated in the setup function to execute code after the component’s DOM has been updated due to reactive state changes.
import { ref, nextTick, onMounted, onUpdated } from 'vue'
export default {
setup() {
const items = ref(['Item 1', 'Item 2'])
const listContainer = ref(null)
const chartContainer = ref(null)
let chart = null
onMounted(() => {
// Initialize chart
chart = new Chart(chartContainer.value, {
type: 'bar',
data: { labels: items.value, datasets: [] }
})
})
onUpdated(() => {
console.log('Component updated')
// Update chart data after items change
if (chart && chart.data.labels.length !== items.value.length) {
chart.data.labels = items.value
chart.update()
}
// Adjust scroll position after content changes
if (listContainer.value) {
const shouldScrollToBottom = items.value.length > 10
if (shouldScrollToBottom) {
listContainer.value.scrollTop = listContainer.value.scrollHeight
}
}
// Measure DOM elements after update
nextTick(() => {
measureElementSizes()
})
})
const addItem = () => {
items.value.push(`Item ${items.value.length + 1}`)
}
const removeItem = (index) => {
items.value.splice(index, 1)
}
const measureElementSizes = () => {
if (listContainer.value) {
const height = listContainer.value.offsetHeight
console.log(`List container height: ${height}px`)
}
}
return {
items,
listContainer,
chartContainer,
addItem,
removeItem
}
},
template: `
<div>
<button @click="addItem">Add Item</button>
<div ref="listContainer" class="list-container">
<div v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">Remove</button>
</div>
</div>
<canvas ref="chartContainer"></canvas>
</div>
`
}
The onUpdated hook runs after every reactive data change that triggers a re-render, so use it sparingly to avoid performance issues. It’s called after the DOM has been updated but before the browser paints. Use nextTick() inside onUpdated if you need to wait for all DOM updates to complete. Common use cases include updating third-party libraries, measuring DOM elements, and adjusting scroll positions. Avoid making reactive data changes directly in onUpdated as this can cause infinite update loops.
Best Practice Note:
In CoreUI components, we use onUpdated strategically for chart updates, scroll management in data tables, and DOM measurements for responsive components. We’re careful to avoid reactive updates within this hook and always use conditions to prevent unnecessary operations, ensuring our components remain performant even with frequent data changes.
