javascript / expert
Snippet
Entprellter Zustand mit Custom Ref
Auf Expertenebene erfordert die Performance-Optimierung bei häufigen Updates (wie Suchfeldern) ein Debouncing auf Reaktivitätsebene. customRef ermöglicht die manuelle Kontrolle darüber, wann Abhängigkeiten verfolgt und Abonnenten benachrichtigt werden, wodurch der Update-Zyklus effektiv abgefangen wird.
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) {let timeout;return customRef((track, trigger) => {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 Hooks für manuelles Tracking und Triggering.
2
track();
Teilt Vue explizit mit, diese Eigenschaft als Abhängigkeit für den aktuellen Effekt zu verfolgen.
3
trigger();
Benachrichtigt manuell alle Watcher und Computed-Properties, dass sich der Wert nach der Verzögerung geändert hat.