title: Use nextTick() to Wait for DOM Updates impact: MEDIUM impactDescription: DOM updates are batched and asynchronous - direct DOM access after state changes sees stale values type: capability tags: [vue3, dom, nextTick, reactivity, async]
Use nextTick() to Wait for DOM Updates
Impact: MEDIUM - Vue batches DOM updates asynchronously for performance. If you access the DOM immediately after changing reactive state, you'll see the old values. Use nextTick() to wait for the DOM to update.
When you modify reactive state, Vue doesn't update the DOM synchronously. Instead, it buffers changes and applies them in the next "tick" of the event loop. This is a performance optimization, but it can cause bugs when you need to read from or manipulate the DOM after state changes.
Task Checklist
- Use
await nextTick()when you need to access updated DOM elements after state changes - Use
nextTick()when measuring DOM elements (heights, widths) after data changes - Use
nextTick()when focusing inputs or scrolling after content updates - Consider if you really need DOM access - often you can work with reactive data instead
Incorrect:
import { ref } from 'vue'
const message = ref('Hello')
const messageEl = ref(null)
function updateMessage() {
message.value = 'Updated!'
// WRONG: DOM still shows "Hello" at this point
console.log(messageEl.value.textContent) // "Hello" - stale!
// WRONG: Scrolling/focusing may not work correctly
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
}
Correct:
import { ref, nextTick } from 'vue'
const message = ref('Hello')
const messageEl = ref(null)
async function updateMessage() {
message.value = 'Updated!'
// CORRECT: Wait for DOM to update
await nextTick()
// Now the DOM is updated
console.log(messageEl.value.textContent) // "Updated!"
// Scrolling and focusing now work correctly
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
}
// Alternative: callback syntax
function updateWithCallback() {
message.value = 'Updated!'
nextTick(() => {
console.log(messageEl.value.textContent) // "Updated!"
})
}
<script setup>
import { ref, nextTick } from 'vue'
const items = ref([])
const listRef = ref(null)
async function addItem() {
items.value.push({ id: Date.now(), text: 'New item' })
await nextTick()
// Now we can safely scroll to the new item
listRef.value.lastElementChild?.scrollIntoView({ behavior: 'smooth' })
}
</script>