Fine-tuning Watchers with Flush Timing

Snippet

Fine-tuning Watchers with Flush Timing

By default, Vue watchers run before DOM updates. Using flush: 'post' ensures the watcher callback executes after the DOM has been updated, which is crucial when you need to access the updated DOM elements.

snippet.js
javascript
import { ref, watch } from 'vue';
const count = ref(0);
const elementRef = ref(null);
 
watch(count, (newVal) => {
  // By default, elementRef.value might not reflect the updated DOM yet
  console.log('Watcher triggered');
}, { flush: 'post' });

vue

Breakdown

flush: 'post'

Tells Vue to defer the watcher callback until after the DOM rendering cycle is complete.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Fine-tuning Watchers with Flush Timing

Related