onUpdated and onBeforeUpdate
Reacting to reactive data changes, avoiding infinite update loops in onUpdated.
Hooks Around Updates
When reactive data changes, Vue re-renders the component. Two hooks bracket this: onBeforeUpdate fires before the DOM is patched and onUpdated fires after.
onUpdated: After the Patch
onUpdated runs once the DOM has been updated to reflect new reactive state. At this point the rendered DOM matches your data.
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM is now up to date')
})
</script>All lessons in this course
- Lifecycle Phases Overview
- onMounted and onBeforeMount
- onUpdated and onBeforeUpdate
- onUnmounted and Cleanup Patterns