Intermediate LevelVue JS
What is flush: "post" in Vue watchers and why is it required for DOM measurements?
❓ Interview Prompt: Explain watcher flush timing options (pre, post, sync), watchPostEffect(), and inspecting updated DOM nodes inside watchers.
By default, Vue watchers run with 'flush: "pre"', meaning the watcher callback executes BEFORE Vue updates the DOM.
Watcher Flush Timing Modes:
•
'flush: "pre"' (Default): Runs callback before DOM updates.
•
'flush: "post"' (or 'watchPostEffect()'): Runs callback AFTER Vue has updated the DOM. Essential if your watcher needs to inspect updated DOM element dimensions, canvas nodes, or scroll positions!
•
'flush: "sync"': Executes callback synchronously every time a ref changes (use with caution due to performance overhead).
Code Implementation Example
javascript
import { ref, watchPostEffect } from 'vue';
const items = ref(['Item 1']);
const listContainerRef = ref(null);
// watchPostEffect runs callback AFTER Vue re-renders the DOM!
watchPostEffect(() => {
if (listContainerRef.value) {
// Scroll container to bottom after DOM item insertion
listContainerRef.value.scrollTop = listContainerRef.value.scrollHeight;
}
});💡Using watchPostEffect to auto-scroll list container after DOM rendering.
🎯 Interview Key Takeaway
Use flush: "post" or watchPostEffect() when your watcher callback needs to access updated DOM element measurements.
#watchPostEffect#flush#DOM#Intermediate
Back to all Vue JS Questions→