So verwenden Sie die Vue-Cache-Funktion

Cache-Funktion in vue2

In der vue2-Version gibt es eine solche Cache-Funktion

  /**
   * Erstellen Sie eine zwischengespeicherte Version einer reinen Funktion.
   */
  Funktion zwischengespeichert (fn) {
    var cache = Objekt.create(null);
    return (Funktion cachedFn (str) {
      var hit = cache[str];
      Treffer zurückgeben || (Cache[str] = fn(str))
    })
  }
  

Für die obige Funktion gilt ein allgemeines Szenario: Beispielsweise gibt es ein Array und der erste Buchstabe jedes Elements muss in einen Großbuchstaben umgewandelt werden.

const array = ['abc', 'ed', 'abc', 'acd', 'ed', 'fkg', ...];

Gemeinsame Lösungen

//Definiere eine Großschreibungsfunktion function capitalize (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
 };
  
 const capitalizeArray = array.map(großschreiben);

Wenn wir vorsichtig sind, werden wir feststellen, dass das Array viele sich wiederholende Elemente enthält. Sie liefern dieselben Ergebnisse. Tatsächlich ist es nicht nötig, die Berechnung zu wiederholen, um „capitalize“ auszuführen. Außerdem ist „capitalize“ eine REINE Funktion. Zu diesem Zeitpunkt können wir die obige zwischengespeicherte Funktion verwenden, um ein Memo zu erstellen.

Die Transformation erfolgt wie folgt

Funktion Großschreibung(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
 };
  
const capitalizeArray = array.map(cached(capitalize));

Wenn eine doppelte Zeichenfolge gefunden wird, wird das zwischengespeicherte Ergebnis direkt zurückgegeben. Bedenken Sie, dass die Großschreibung eine sehr zeitaufwändige Aufgabe ist und die Leistungsoptimierung mehr als nur ein bisschen erfordert.

Transformieren Sie die Vue-Cache-Funktion

Das obige Beispiel ist eine reine Funktion der Cache-Synchronisierungsaufgabe. In der Geschäftsentwicklung gibt es ein solches Szenario: Eingabefeldsuche. Wenn das Eingabefeld ein Eingabeereignis auslöst, rufen wir die Schnittstelle auf, um die Abfrageergebnisse zurückzugeben. Ich habe beispielsweise das Schlüsselwort Nuggets eingegeben und das Ergebnis wurde zurückgegeben. Dann habe ich Nuggets NBA eingegeben und das Ergebnis wurde zurückgegeben. Zu diesem Zeitpunkt habe ich NBA gelöscht und erneut nach Nuggets gesucht. Tatsächlich haben wir dieses Ergebnis bereits überprüft. Wenn es zwischengespeichert ist, können wir den Cache direkt abrufen, ohne die Schnittstelle erneut aufzurufen.

Wir implementieren ein Memo zum Zwischenspeichern asynchroner reiner Funktionen basierend auf Cache

const cachedAsync = Funktion(fn) {
    const cache = Objekt.erstellen(null);
    returniere asynchron str => {
        const hit = cache[str];
        wenn (Treffer) {
            Rückschlag;
        }
        // Nur erfolgreiche Promises zwischenspeichern und bei Fehlschlag direkt erneut die Rückgabe anfordern (cache[str] = await fn(str));
    };
};

Anwendungsszenarien

const cachedAsyncQueryPrdList = cachedAsync(prdNo => {
    // Das Folgende ist eine Anforderungsoperation, die ein Versprechen zurückgibt
    returniere queryPrdList({
        prdNr
    });
}); 

<Vorlage>
    <el-input v-model="prdNo" placeholder="Bitte geben Sie den Produktcode ein" @input="handleQueryPrdList" />
    <el-Auswahl>
        <el-option v-for="Element in prdList" :label="Element.label" :value="Element.value">
    </el-Auswahl>
</Vorlage>
<Skript>
Standard exportieren {
    Daten() {
        prdNr: '',
        prdList: [],
    },
    Methoden: {
        asynchron handleQueryPrdList() {
            const { data } = warte auf cachedAsyncQueryPrdList(this.prdNo);
            this.prdList = Daten;
        }
    }
}
</Skript>

Die obige Implementierung bedeutet, dass beim Eingeben des gleichen Schlüsselworts, sofern die vorherige Anfrage erfolgreich war, der Cache direkt abgerufen wird, ohne dass eine neue Anfrage an den Server gestellt wird. Denn in unserem Memo werden nur erfolgreiche Versprechen zwischengespeichert.

Optimierung

Obwohl im obigen Szenario die zugrunde liegende Ebene von el-input die Ereignisse compositionEnd und compositionStart verwendet hat, um eine Ebene gegen Verwackeln zu erstellen, wird das Eingabeereignis nur ausgelöst, wenn der Text tatsächlich auf dem Bildschirm eingegeben wird. Dies reicht jedoch nicht aus. Wenn der Benutzer sehr schnell tippt, werden möglicherweise mehrere Anfragen pro Sekunde gesendet, was die Belastung des Servers erhöht. Daher wird diese Art von Funktion im Allgemeinen in Verbindung mit der Anti-Shake-Funktion verwendet.

Anti-Shake-Funktion

const Entprellung = (fn, ms = 300) => {
    lass timeoutId;
    Rückgabefunktion (... args) {
        Zeitüberschreitung löschen (Timeout-ID);
        : TimeoutId = setTimeout(() => fn.apply(this, args), ms);
    };
};

Dann verwenden Sie es mit unserem cachedAsync

const cachedAsyncQueryPrdList = cachedAsync(prdNo => {
    // Das Folgende ist eine Ajax-Anforderungsoperation, die ein Versprechen zurückgibt
    returniere queryPrdList({
        prdNr
    });
}); 

<Vorlage>
    <el-input v-model="prdNo" placeholder="Bitte geben Sie den Produktcode ein" @input="debounceQueryPrdListFn" />
    <el-Auswahl>
        <el-option v-for="Element in prdList" :label="Element.label" :value="Element.value">
    </el-Auswahl>
</Vorlage>
<Skript>
const noop = () => {};
Standard exportieren {
    Daten() {
        prdNr: '',
        prdList: [],
        debounceQueryPrdListFn: noop,
    },
    erstellt() {
        this.debounceQueryPrdListFn = entbounce(this.handleQueryPrdList);
    },
    Methoden: {
        asynchron handleQueryPrdList() {
            const { data } = warte auf cachedAsyncQueryPrdList(this.prdNo);
            this.prdList = Daten;
        }
    }
}
</Skript>

FBI-WARNUNG: >>> cachedAsync-Funktion, gilt nur für PURE-Funktionen.

Diese Implementierung wurde stabil in der Produktionsumgebung eingesetzt, sodass Sie sie vertrauensvoll verwenden können.

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung der Vue-Cache-Funktionen. Weitere Informationen zur Verwendung der Vue-Cache-Funktionen 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!