0 Tage Serie
javascript / intermediate
Snippet

Feinabstimmung von Watchern mit Flush-Timing

Standardmäßig werden Vue-Watcher vor den DOM-Updates ausgeführt. Die Verwendung von flush: 'post' stellt sicher, dass der Watcher-Callback erst nach der Aktualisierung des DOM ausgeführt wird, was entscheidend ist, wenn Sie auf aktualisierte DOM-Elemente zugreifen müssen.

snippet.js
javascript
1
2
3
4
5
6
7
8
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
Erklärung
1
flush: 'post'
Weist Vue an, den Watcher-Callback zu verschieben, bis der DOM-Rendering-Zyklus abgeschlossen ist.