Analyse von Beispielen für die Verwendung von Anti-Shake und Throttling in Vue-Komponenten

Seien Sie vorsichtig, wenn Sie auf Ereignisse achten, die häufig ausgelöst werden, wie z. B. Benutzereingaben in ein Eingabefeld, Größenänderungen von Fenstern, Scrollen und Intersection Observer-Ereignisse.

Diese Ereignisse werden immer häufig ausgelöst, möglicherweise alle paar Sekunden. Es wäre unklug, für jedes Ereignis eine Abrufanforderung (oder etwas Ähnliches) zu initiieren.

Wir müssen lediglich die Ausführung unserer Ereignishandler verlangsamen. Bei dieser Puffertechnologie handelt es sich um Entprellung und Drosselung.

1. Beobachterstabilisierung

Beginnen wir mit einer einfachen Komponente. Unsere Aufgabe besteht darin, den vom Benutzer in das Textfeld eingegebenen Text auf der Konsole auszugeben:

<Vorlage>
  <Eingabe v-Modell="Wert" Typ="Text" />
  <p>{{ Wert }}</p>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Wert: "",
    };
  },
  betrachten:
    Wert(neuerWert, alterWert) {
      console.log("Wert geändert: ", neuerWert);
    }
  }
};
</Skript>

Öffnen Sie die Demo:

https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

Öffnen Sie die Demo und geben Sie einige Zeichen in das Eingabefeld ein. Bei jeder Eingabe wird der Wert in der Konsole protokolliert.

Wir implementieren die Protokollierung, indem wir einen Watcher verwenden, um die Wertdateneigenschaft zu überwachen. Wenn Sie jedoch eine GET-Anfrage mit Wert als Parameter im Beobachter-Rückruf hinzufügen möchten, gehen Sie wahrscheinlich nicht davon aus, dass Sie die Anfrage allzu oft stellen werden.

Lassen Sie uns das Verhalten beim Drucken von Konsolenprotokollen entprellen. Die Kernidee besteht darin, eine Entprellfunktion zu erstellen und diese Funktion dann innerhalb des Beobachters aufzurufen.

Ich habe hier die Debounce-Implementierung „lodash.debounce“ gewählt, Sie können aber frei Ihre bevorzugte Implementierung wählen.

Wenden wir die Anti-Shake-Logik auf die Komponente an:

<Vorlage>
  <Eingabe v-Modell="Wert" Typ="Text" />
  <p>{{ Wert }}</p>
</Vorlage>
<Skript>
importiere Entprellung von „lodash.debounce“;
Standard exportieren {
  Daten() {
    zurückkehren {
      Wert: "",
    };
  },
  betrachten:
    Wert(...Argumente) {
      dies.debouncedWatch(...args);
    },
  },
  erstellt() {
    this.debouncedWatch = debounce((neuerWert, alterWert) => {
      console.log('Neuer Wert:', neuerWert);
    }, 500);
  },
  vorUnmount() {
    dies.debouncedWatch.cancel();
  },
};
</Skript>

Testen Sie die Demo

https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

Wenn Sie diese Demo öffnen, werden Sie feststellen, dass sich aus Benutzersicht nicht viel geändert hat: Sie können Zeichen immer noch frei eingeben, wie in der vorherigen Demo.

Es gibt jedoch einen Unterschied: Neue Eingabewerte werden erst 500 ms nach der letzten Eingabe in der Konsole protokolliert. Dies zeigt, dass die Anti-Shake-Funktion funktioniert.

Die Implementierung des Observer Anti-Shake erfordert nur drei einfache Schritte:

Erstellen Sie im create()-Hook den Debounce-Callback und weisen Sie ihn der Instanz zu: this.debouncedWatch = debounce(..., 500).

Rufen Sie this.debouncedWatch() mit den richtigen Argumenten im Beobachter-Callback watch.value() { ... } auf.

Schließlich wird this.debouncedWatch.cancel() im beforeUnmount()-Hook aufgerufen, um alle ausstehenden Debounce-Funktionsausführungen abzubrechen, bevor die Komponente deinstalliert wird.

Auf die gleiche Weise können Sie die Entprellung auf Beobachter beliebiger Dateneigenschaften anwenden. Anschließend können Sie innerhalb des Anti-Shake-Rückrufs einige schwerere Vorgänge sicher ausführen, z. B. Netzwerkanforderungen, schwere DOM-Vorgänge usw.

2. Ereignisprozessor Anti-Shake

Im vorherigen Abschnitt habe ich gezeigt, wie man Anti-Shake für Beobachter verwendet, aber was ist mit normalen Ereignishandlern?

Wir verwenden das vorherige Beispiel erneut, bei dem der Benutzer Daten in ein Eingabefeld eingibt, dieses Mal fügen wir dem Eingabefeld jedoch einen Ereignishandler hinzu.

Wenn Sie keine Puffermaßnahmen ergreifen, wird der Wert wie üblich bei jeder Änderung auf der Konsole ausgegeben:

<Vorlage>
  <input v-on:input="handler" type="text" />
</Vorlage>
<Skript>
Standard exportieren {
  Methoden: {
    handler(Ereignis) {
      console.log('Neuer Wert:', event.target.value);
    }
  }
};
</Skript>

Probieren Sie die Demo aus:

https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

Öffnen Sie diese Demo und geben Sie einige Zeichen in das Eingabefeld ein. Werfen Sie einen Blick auf die Konsole: Sie werden sehen, dass jedes Mal, wenn Sie etwas eingeben, etwas ausgedruckt wird.

Wenn Sie schwere Vorgänge durchführen (z. B. Netzwerkanforderungen), ist dies möglicherweise ebenfalls nicht geeignet.

Informationen zum Verwenden von Anti-Shake für Ereignishandler finden Sie unter:

<Vorlage>
  <input v-on:input="debouncedHandler" type="text" />
</Vorlage>
<Skript>
Entprellung von „lodash.debounce“ importieren;
Standard exportieren {
  erstellt() {
    this.debouncedHandler = Entprellung(Ereignis => {
      console.log('Neuer Wert:', event.target.value);
    }, 500);
  },
  vorUnmount() {
    dies.debouncedHandler.cancel();
  }
};
</Skript>

Probieren Sie die Demo aus:

https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue

Öffnen Sie die Demo und geben Sie einige Zeichen ein. Die Komponente protokolliert neue Eingabewerte erst 500 ms nach der letzten Eingabe in der Konsole. Anti-Shake funktioniert wieder!

Die Implementierung des Eventhandler-De-Shakings erfordert nur drei Schritte:

.Weisen Sie im create()-Hook nach dem Erstellen der Instanz sofort den Debounce-Callback debounce(event => {...}, 500) diesem.debouncedHandler zu.

Weisen Sie in der Vorlage des Eingabefelds v-on:input einen debouncedHandler zu:

Rufen Sie abschließend vor dem Aushängen der Komponente this.debouncedHandler.cancel() im beforeUnmount()-Hook auf, um alle ausstehenden Funktionsaufrufe abzubrechen.

Andererseits wird in diesen Beispielen eine Anti-Shake-Technologie verwendet. Derselbe Ansatz kann jedoch zum Erstellen von Drosselungsfunktionen verwendet werden.

3. Hinweis

Sie verstehen vielleicht nicht: Warum erstellen Sie nicht einfach die Anti-Shake-Funktion in der Methodenoption der Komponente und rufen diese Methoden dann als Ereignishandler in der Vorlage auf?

// ...
  Methoden: {
    // Warum nicht?
    entprellterHandler: entprellen(Funktion () { ... }}, 500)
  }
// ...

Dies ist viel einfacher als das Erstellen einer Entprellfunktion für das Instanzobjekt.

Zum Beispiel:

<Vorlage>
  <input v-on:input="debouncedHandler" type="text" />
</Vorlage>
<Skript>
Entprellung von „lodash.debounce“ importieren;
Standard exportieren {
  Methoden: {
    // Tu das nicht!
    debouncedHandler: debounce(Funktion(Ereignis) {
      console.log('Neuer Wert:', event.target.value);
    }, 500)
  }
};
</Skript>

Testen Sie die Demo

https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

Dieses Mal wird der Debounce-Rückruf nicht im created()-Hook erstellt, sondern methods.debouncedHandler zugewiesen.

Wenn Sie die Demo ausprobieren, werden Sie feststellen, dass es funktioniert!

Das Problem besteht darin, dass das von einer Komponente mit „export default { ... }“ exportierte Optionsobjekt, einschließlich der Methoden, von Komponenteninstanzen wiederverwendet wird.

Wenn mehr als zwei Instanzen der Komponente auf der Seite vorhanden sind, wird auf alle Komponenten die gleiche Entprellfunktion „methods.debouncedHandler“ angewendet. Dies kann zu Fehlfunktionen der Entprellung führen.

4. Fazit

In Vue ist es einfach, Entprellen und Drosseln auf Beobachter und Ereignishandler anzuwenden.

Die Kernlogik besteht darin, einen Anti-Shake- oder Throttling-Callback im created()-Hook zu erstellen und ihn der Instanz zuzuweisen.

// ...
  erstellt() {
    this.debouncedCallback = Entprellung((...args) => {
      // Der entprellte Rückruf
    }, 500);
  },
// ...

A) Rufen Sie dann innerhalb des Beobachters die Entprellfunktion für die Instanz auf:

// ...
  betrachten:
    Wert(...args) {
      dies.debouncedCallback(...args);
    },
  },
// ...

B) Oder legen Sie einen Eventhandler im Template fest:

<Vorlage>
  <input v-on:input="debouncedHandler" type="text" />
</Vorlage>

Danach kann bei jedem Aufruf von this.debouncedCallback(...args) der interne Rückruf gepuffert werden, selbst wenn die Ausführungsfrequenz sehr hoch ist.

Damit ist dieser Artikel zur Analyse von Anti-Shake- und Throttling-Beispielen in Vue-Komponenten abgeschlossen. Weitere Informationen zur Verwendung von Vue-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!