javascript / expert
Snippet
Terminierung entprellter Zustandsaktualisierungen über explizite CustomRef-Auslöser
customRef bietet explizite Kontrolle über Abhängigkeits-Tracking (track) und Benachrichtigung von Abonnenten (trigger). Durch die Verzögerung des Aufrufs von trigger in einem Timeout werden Reaktivitäts-Updates sauber an der Ref-Grenze entprellt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { customRef } from 'vue';export function useDebouncedRef(initialValue, delayMs = 300) {let timeoutId;return customRef((track, trigger) => ({get() {track();return initialValue;},set(newValue) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {initialValue = newValue;trigger();}, delayMs);}}));}
vue
Erklärung
1
return customRef((track, trigger) => ({
Erstellt ein angepasstes reaktives Ref mit expliziten track- und trigger-Hooks.
2
trigger();
Benachrichtigt reaktive Abonnenten erst nach Ablauf des asynchronen Timers, um Zwischen-Re-Renderings zu unterdrücken.