Beantworten Sie das Caching-Prinzip von Keep-Alive-Komponenten aus Sicht des Quellcodes

// Verwendung der Keep-Alive-Komponente mit dynamischer Komponente. Weitere Verwendungsmöglichkeiten finden Sie auf der offiziellen Website <keep-alive
 include="['KomponentennameA', 'KomponentennameB']"
 exclude="'KomponentennameC'"
 :max="10">
 <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

// Die Funktion isRegExp ermittelt, ob es sich um einen regulären Ausdruck handelt, und remove entfernt ein Mitglied im Array. // getFirstComponentChild ruft die erste gültige Komponente des VNode-Arrays ab. import { isRegExp, remove } from 'shared/util'
importiere { getFirstComponentChild } von 'core/vdom/helpers/index'
​
Typ VNodeCache = { [Schlüssel: Zeichenfolge]: ?VNode }; // Cache-Typ der Cache-Komponente VNode​
// Den Komponentennamen anhand des Komponentennamens oder des Komponententags ermitteln (der zweite oben erwähnte Punkt)
Funktion getComponentName (Optionen: ?VNodeComponentOptions): ?string {
 Optionen zurückgeben && (opts.Ctor.options.name || opts.tag)
}
​
// Bestimmen Sie, ob „include“ oder „exclude“ mit dem Komponentennamen übereinstimmt. Funktion stimmt überein (Muster: Zeichenfolge | RegExp | Array<Zeichenfolge>, Name: Zeichenfolge): Boolean {
 wenn (Array.isArray(Muster)) {
 return pattern.indexOf(name) > -1 // include oder exclude ist ein Array} else if (typeof pattern === 'string') {
 return pattern.split(',').indexOf(name) > -1 // include oder exclude ist ein String } else if (isRegExp(pattern)) {
 return pattern.test(name) // include oder exclude ist ein regulärer Ausdruck}
 return false // Keiner von ihnen stimmt überein (beachten Sie den zweiten und dritten Punkt oben)
}
​
// Cache zerstören Funktion pruneCache (keepAliveInstance: any, filter: Function) {
 const { cache, keys, _vnode } = keepAliveInstance // Keep-Alive-Komponenteninstanz für (const key im Cache) {
 const cachedNode: ?VNode = cache[key] // Komponente, die zwischengespeichert wurde if (cachedNode) {
  Konstantname: ?string = getComponentName(cachedNode.componentOptions)
  // Wenn der Name existiert und nicht mit „include“ oder „exclude“ übereinstimmt, zerstöre die zwischengespeicherte Komponente, wenn (name && !filter(name)) {
  pruneCacheEntry(Cache, Schlüssel, Schlüssel, _vnode)
  }
 }
 }
}
​
//Zerstöre den Cache-Eintrag Funktion pruneCacheEntry (
 Cache: VNodeCache,
 Schlüssel: Zeichenfolge,
 Schlüssel: Array<string>,
 aktuell?: VNode
) {
 const cached = cache[key] // Zwischengespeicherte Komponente // „Ob das Zwischenspeichern von Komponenten fortgesetzt werden soll“, wenn eine Änderung vorliegt // Wenn die Komponente zwischengespeichert wurde und die aktuelle Komponente nicht existiert oder das Tag der zwischengespeicherten Komponente nicht mit dem Tag der aktuellen Komponente übereinstimmt, if (cached && (!current || cached.tag !== current.tag)) {
 // Dies bedeutet, dass die Komponente nicht mehr zwischengespeichert werden muss. Zerstöre die Komponenteninstanz cached.componentInstance.$destroy()
 }
 cache[key] = null // Setzt diese Komponente im Cache auf null
 remove(keys, key) // Entferne den Schlüssel dieser Komponente aus dem keys-Array}
​
// Beispieltyp const patternTypes: Array<Function> = [String, RegExp, Array]
​
// Einige Optionen der Keep-Alive-Komponente verfügbar machen export default {
 Name: 'keep-alive', // Komponentenname abstract: true, // keep-alive ist eine abstrakte Komponente​
 // Drei Props, die bei Verwendung der Keep-Alive-Komponente übergeben werden
 Requisiten: {
 umfassen: Mustertypen,
 ausschließen: Mustertypen,
 max: [Zeichenfolge, Zahl]
 },
​
 erstellt () {
 this.cache = Object.create(null) // Komponenten speichern, die zwischengespeichert werden müssen this.keys = [] // Den Schlüssel jeder Komponente speichern, die zwischengespeichert werden muss, d. h. den Schlüsselwert, der dem this.cache-Objekt entspricht},
​
 // Wenn eine Keep-Alive-Komponente zerstört wird, zerstöre alle Komponenten im Cache destroyd () {
 für (const key in this.cache) {
  pruneCacheEntry(dieser.Cache, Schlüssel, diese.Schlüssel)
 }
 },
​
 // Wenn die Keep-Alive-Komponente gemountet ist, überwacht sie die Änderungen von Include und Exclude und zerstört die zwischengespeicherte Komponente, wenn die Bedingungen erfüllt sind. mounted () {
 dies.$watch('include', val => {
  pruneCache(dieser, Name => Übereinstimmungen(Wert, Name))
 })
 dies.$watch('ausschließen', val => {
  pruneCache(dieser, Name => !matches(Wert, Name))
 })
 },
​
 // Der Punkt ist hier render () {
 const slot = this.$slots.default // Standard-Slot für Keep-Alive-Komponenten const vnode: VNode = getFirstComponentChild(slot) // Erste gültige Komponente des Standard-Slots abrufen // Wenn Vnode vorhanden ist, Optionen von Vnode übernehmen const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (Komponentenoptionen) {
  //Holen Sie sich den Namen der ersten gültigen Komponente
  Konstantname: ?string = getComponentName(Komponentenoptionen)
  const { include, exclude } = this // Einschließen und Ausschließen werden von den Props übergeben
  Wenn (
  // Wenn Include vorhanden ist und Name nicht vorhanden ist oder Name nicht übereinstimmt (include && (!name || !matches(include, name))) ||
  // Wenn Ausschließen vorhanden ist und Name vorhanden ist oder Name übereinstimmt (Ausschließen && Name && Übereinstimmungen(Ausschließen, Name))
  ) {
  return vnode // Gibt an, dass kein Caching erforderlich ist und diese Komponente direkt zum Rendern zurückgegeben wird}
  
  // Wenn eine Übereinstimmung gefunden wird, ist ein Cache-Vorgang erforderlich const { cache, keys } = this // Die Cache-Komponente der Keep-Alive-Komponente und der Schlüssel, der der Cache-Komponente entspricht
  // Den Schlüssel der ersten gültigen Komponente abrufen
  const-Schlüssel: ?string = vnode.key == null
  // Derselbe Konstruktor kann als verschiedene lokale Komponenten registriert werden // Also reicht cid allein nicht aus, verketten wir es? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.schlüssel
  // Wenn diese Komponente den Cache erreicht if (cache[key]) {
  // Diese Komponenteninstanz wird durch die Komponenteninstanz im Cache ersetzt vnode.componentInstance = cache[key].componentInstance
  // Aktualisiere die Position des aktuellen Schlüssels in keysremove(keys, key) // Entferne den aktuellen Schlüssel aus keyskeys.push(key) // Setze ihn ans Ende von keys} else {
  // Wenn der Cache nicht getroffen wird, füge diese Komponente zum Cache hinzu cache[key] = vnode
  keys.push(key) // Setze den Schlüssel dieser Komponente ans Ende von keys // Wenn die Anzahl der Komponenten im Cache das übergebene Maximum überschreitet, zerstöre die LRU-Komponente im Cache if (this.max && keys.length > parseInt(this.max)) {
   pruneCacheEntry(Cache, Schlüssel[0], Schlüssel, this._vnode)
  }
  }
​
  vnode.data.keepAlive = true // Setzt die keepAlive-Eigenschaft dieser Komponente auf true
 }
 // Wenn die erste gültige Komponente existiert, aber ihre Komponentenoptionen nicht existieren, gib diese Komponente zum Rendern zurück // Oder wenn es keine gültige erste Komponente gibt, aber der Standardslot der Keep-Alive-Komponente existiert, gib die erste Komponente des Standardslots zum Rendern zurück return vnode || (Slot && Slot[0])
 }
}