javascript / expert
Snippet
Eigene Debounced Ref Fabrik
Eigene Ref-Fabriken ermöglichen eine feingliedrige Kontrolle über die Reaktivität. Diese Implementierung verzögert (debounces) Status-Updates, um exzessive Re-Renderings bei schnellen Eingaben zu verhindern, indem track() und trigger() manuell gesteuert werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { customRef } from 'vue';export function useDebouncedRef(value, delay = 200) {return customRef((track, trigger) => {let timeout;return {get() {track();return value;},set(newValue) {clearTimeout(timeout);timeout = setTimeout(() => {value = newValue;trigger();}, delay);}};});}
vue
Erklärung
1
return customRef((track, trigger) => {
Initialisiert eine benutzerdefinierte reaktive Referenz mit manueller Verfolgung und Auslösekontrolle.
2
get() { track(); return value; },
Registriert den aktuellen Effekt als Abhängigkeit dieser Ref mithilfe der track()-Funktion.
3
set(newValue) { ... trigger(); }
Benachrichtigt Vue manuell, abhängige Effekte erst nach dem angegebenen Timeout erneut auszuführen.