Verwendung des LRU-Algorithmus in der in Vue integrierten Komponente „Keep-Alive“

Standard exportieren {
  Name: "Keep-Alive",
  // Abstrakte Komponenteneigenschaften, die ignoriert werden, wenn die Komponenteninstanz eine Eltern-Kind-Beziehung herstellt, was während des initLifecycle-Prozesses geschieht abstract: true, 
  Requisiten: {
    // Cache-Komponenten umfassen: patternTypes, 
    // Komponenten vom Cache ausschließen: patternTypes,
    // Maximale Cachegröße angeben: [String, Number] 
  },
  erstellt() {
    // Initialisieren Sie das Cache-Objekt, das zum Speichern des Caches verwendet wird. this.cache = Object.create(null);
    // Initialisieren Sie das Schlüssel-Array, das zum Speichern von VNode-Schlüsselwerten verwendet wird. this.keys = []; 
  },
  zerstört() {
    für (const key in this.cache) {
      // Alle Caches löschen pruneCacheEntry(this.cache, key, this.keys);
    }
  },
  montiert() {
    // Auf Änderungen im Cache achten (Komponenten einschließen/ausschließen) // Cache bei Änderungen neu anpassen
    // pruneCache: den Cache durchlaufen. Wenn der zwischengespeicherte Knotenname nicht mit der übergebenen Regel übereinstimmt, den Knoten aus dem Cache entfernen. this.$watch("include", val => {
      pruneCache(dieser, Name => Übereinstimmungen(Wert, Name));
    });
    dies.$watch("ausschließen", val => {
      pruneCache(diesen, Namen => !matches(Wert, Namen));
    });
  },
  rendern() {
    // Holen Sie sich den Vnode des ersten untergeordneten Elements
    const slot = this.$slots.default;
    const vnode: VNode = getFirstComponentChild(slot);
    Konstante Komponentenoptionen: ?VNodeComponentOptions =
      vnode und vnode.Komponentenoptionen;
    if (Komponentenoptionen) {
      // Wenn der Name weder in „include“ noch in „exclude“ enthalten ist, gib vnode direkt zurück, andernfalls fahre mit dem nächsten Schritt fort // überprüfe das Muster
      Konstantname: ?string = getComponentName(Komponentenoptionen);
      const { einschließen, ausschließen } = dies;
      Wenn (
        // nicht enthalten
        (einschließen && (!Name || !Übereinstimmungen(einschließen, Name))) ||
        // ausgeschlossen
        (ausschließen && Name && Übereinstimmungen mit (ausschließen, Name))
      ) {
        vnode zurückgeben;
      }
      
      const { Cache, Schlüssel } = dies;
      // Holen Sie sich den Schlüssel, holen Sie sich zuerst das Namensfeld der Komponente, andernfalls ist es das Tag der Komponente
      Konstant-Schlüssel: ?string =
        vnode.key == null
          ? // derselbe Konstruktor kann als unterschiedliche lokale Komponenten registriert werden
            // daher reicht cid allein nicht aus (#3269)
            KomponenteOptions.Ctor.cid +
            (Komponentenoptions.tag? `::${Komponentenoptions.tag}`: "")
          : vnode.schlüssel;
        
      // --------------------------------------------------
      // Das Folgende ist der LRU-Algorithmus.
      // Wenn es im Cache ist, passe es an.
      // Wenn nicht, fügen Sie es ein (wenn die Länge das Maximum überschreitet, löschen Sie diejenigen, auf die in letzter Zeit nicht zugegriffen wurde)
      // --------------------------------------------------
      // Wenn der Cache gefunden wird, hole die Komponenteninstanz von vnode aus dem Cache und passe die Reihenfolge der Schlüssel an das Ende des Schlüssel-Arrays an, wenn (Cache[Schlüssel]) {
        vnode.componentInstance = cache[Schlüssel].componentInstance;
        // aktuellen Schlüssel auf den neuesten Stand bringen
        entfernen(Schlüssel, Schlüssel);
        Tasten.drücken(Taste);
      }
      // Wenn der Cache nicht getroffen wird, lege den Vnode in den Cache, sonst {
        Cache[Schlüssel] = vnode;
        Tasten.drücken(Taste);
        // ältesten Eintrag löschen
        // Wenn max konfiguriert ist und die Cachelänge this.max überschreitet, lösche das erste aus dem Cache if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(Cache, Schlüssel[0], Schlüssel, this._vnode);
        }
      }
      
      // KeepAlive-Flag vnode.data.keepAlive = true;
    }
    vnode zurückgeben || (Slot und Slot[0]);
  }
};

// Schlüsselcache entfernen Funktion pruneCacheEntry (
  Cache: VNodeCache,
  Schlüssel: Zeichenfolge,
  Schlüssel: Array<string>,
  aktuell?: VNode
) {
  const cached = cache[Schlüssel]
  wenn (zwischengespeichert && (!aktuell || zwischengespeichert.tag !== aktuell.tag)) {
    zwischengespeichert.Komponenteninstanz.$destroy()
  }
  cache[Schlüssel] = null
  entfernen(Schlüssel, Schlüssel)
}

// Methode entfernen (shared/util.js)
/**
 * Entfernen Sie ein Element aus einem Array.
 */
Exportfunktion entfernen (arr: Array<beliebig>, Element: beliebig): Array<beliebig> | void {
  wenn (arr.Länge) {
    const index = arr.indexOf(Element)
    wenn (Index > -1) {
      gibt arr.splice(index, 1) zurück
    }
  }
}

Klasse LRU {
  Konstruktor(Größe) {
    this.cache = neue Map()
    this.size = Größe
  }
  setze (Schlüssel, Wert) {
    //Existiertwenn (this.cache.has(Schlüssel)) {
      //löschen this.cache.delete(Schlüssel)
    } anders {
      // Existiert nicht, ist die Kapazität voll if (this.size === this.cache.size) {
        //Das letzte löschen this.cache.delete(this.cache.keys().next().value) //Das Element am Ende der Warteschlange holen}
    }
    //Am Anfang der Warteschlange einfügen this.cache.set(key, val)
  }
  get (Schlüssel) {
    let val = this.cache.get(Schlüssel)
    wenn (!val) {
      Rückgabe -1
    }
    //Nach dem Zugriff muss es an den Anfang der Warteschlange gestellt werden this.put(key, val)
    Rückgabewert
  }
}

//Definiere die Knotenklasse class Node {
    Konstruktor(Vorheriger, Nächster, Wert, Schlüssel){
        dies.pre = vor;
        dies.nächstes = nächstes;
        dieser.Wert = Wert;
        dieser.Schlüssel = Schlüssel;
    }
}

//Definiere eine bidirektionale verknüpfte Liste Klasse DoubleList {
    Konstruktor(Kopf, Ende){
        dies.kopf = Kopf;
        dies.schwanz = schwanz;
    }
}


Klasse LRUCache {
    //Konstruktor, übergebe die Cachekapazität Konstruktor(max){
        dies.max = max;
        diese.map = neue Map();
        let node = neuer Knoten(null, null, null, null);
        this.doubleList = neue DoubleList(Knoten, Knoten);
    }
    
    /**
     * Holen Sie sich den Cache-Wert. * Wenn er nicht vorhanden ist, geben Sie -1 zurück. Wenn er vorhanden ist, geben Sie den entsprechenden Wert zurück und verschieben Sie diesen Knoten an das Ende. * @param {*} Schlüssel Schlüsselwert */
    get(Schlüssel){
        let node = this.map.get(Schlüssel)
        wenn(!node){
            Rückgabe -1;
        }anders{
            this.moveNode2Tail(Schlüssel, Knoten);
            Knotenwert zurückgeben;
        }
    }

    /**
     * Cache einfügen * 1. Wenn der entsprechende Schlüsselwert nicht existiert, füge ihn dem Ende hinzu * 2. Wenn der entsprechende Schlüsselwert existiert, aktualisiere den diesem Schlüsselwert entsprechenden Wert und erwähne ihn dem Ende * 3. Wenn die Kapazität überschritten wird, entferne die Header-Daten * @param {*} Schlüssel Schlüsselwert * @param {*} Wert Wert
     */
    setze(Schlüssel, Wert) {
        lass Knoten = this.map.get(Schlüssel);
        wenn(Knoten){
            wenn(!node.next){
                Knoten.Wert = Wert;
                zurückkehren;
            }
            Knoten.pre.next = Knoten.next;
            Knoten.nächster.pre = Knoten.pre;
        }
        let newNode = neuer Node(null, null, Wert, Schlüssel);
        neuerNode.pre = diese.doubleList.tail;
        this.doubleList.tail.next = neuer Knoten;
        this.doubleList.tail = neuer Knoten;
        this.map.set(Schlüssel, neuer Knoten);
        wenn(diese.Kartengröße > dies.max){
            diese.Karte.löschen(diese.doubleList.head.next.key);
            diese.doubleList.head.next = diese.doubleList.head.next.next;
            diese.doubleList.head.next.pre = diese.doubleList.head;          
        }
    }
    
    //Verschiebe den Knoten zum Ende moveNode2Tail(key,node){   
        wenn(!node.next){
            zurückkehren;
        }
        //Knoten löschen node.pre.next = node.next;
        Knoten.nächster.pre = Knoten.pre;
        this.map.delete(Schlüssel)
        //Einen neuen Endknoten hinzufügen let newNode = new Node(null, null, node.value, key);
        neuerNode.pre = diese.doubleList.tail;
        this.doubleList.tail.next = neuer Knoten;
        this.doubleList.tail = neuer Knoten;
        this.map.set(Schlüssel, neuer Knoten);
    }
}