Vue.js
nextTick() in Vue.js
Use nextTick to run code after Vue applies reactive changes to the DOM.
0 views
nextTick()defers a callback until the next DOM update cycle in Vue.js.- Ensures DOM updates from reactive data changes are applied before the callback runs.
- Used to access or manipulate the DOM after Vue updates it (e.g., post
v-forchange). - Syntax:
Vue.nextTick(callback)globally orthis.$nextTick(callback)in components. - Batches DOM updates for performance, executing callbacks in the next microtask.
- Supports
await this.$nextTick()for async functions. - Example: Update data, then use
this.$nextTick(() => console.log(this.$el.textContent)). - Runs in the microtask queue, after JavaScript execution and before browser repaint.