Entprellte reaktive Referenzen mit customRef

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
javascript
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

customRef((track, trigger) => {

Initialisiert eine benutzerdefinierte Referenz mit Tracking- und Trigger-Funktionen.

track();

Markiert die Abhängigkeit manuell als verfolgt für das Reaktivitätssystem von Vue.

trigger();

Signalisiert manuell, dass sich der Wert geändert hat, um Abonnenten zu aktualisieren.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek