javascript / intermediate
Snippet
Entprellte reaktive Referenzen mit customRef
Die Funktion customRef ermöglicht die explizite Kontrolle über das Tracking von Abhängigkeiten und das Auslösen von Änderungen. Dies ist ideal für die Erstellung von entprellten Eingaben, bei denen der reaktive Zustand erst nach einer gewissen Zeit der Inaktivität aktualisiert werden soll, um übermäßige Re-Renderings oder API-Aufrufe zu vermeiden.
snippet.js
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
customRef((track, trigger) => {
Initialisiert eine benutzerdefinierte Referenz mit Tracking- und Trigger-Funktionen.
2
track();
Markiert die Abhängigkeit manuell als verfolgt für das Reaktivitätssystem von Vue.
3
trigger();
Signalisiert manuell, dass sich der Wert geändert hat, um Abonnenten zu aktualisieren.