javascript / expert
Snippet
Benutzerdefinierte reaktive Logik mit customRef
customRef bietet explizite Kontrolle über das Dependency-Tracking und Trigger-Benachrichtigungen. Dies ist ideal für die Implementierung von Debouncing, Throttling oder die Integration von Nicht-Standard-Datenquellen, bei denen man präzise steuern möchte, wann ein Re-Render erfolgt.
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';function useDebouncedRef(value, delay = 200) {let timeout;return customRef((track, trigger) => ({get() {track();return value;},set(newValue) {clearTimeout(timeout);timeout = setTimeout(() => {value = newValue;trigger();}, delay);}}));}
vue
Erklärung
1
customRef((track, trigger) => ({ ... }));
Factory-Funktion, die Low-Level-Reaktivitäts-Hooks bereitstellt.
2
track();
Teilt Vue mit, dass der aktuelle Effekt vom Wert dieser Ref abhängt.
3
trigger();
Teilt Vue mit, alle Effekte, die von dieser Ref abhängen, neu auszuführen.