Detaillierte Erklärung der KeepAlive-Anwendungsfälle in Vue

Bei der Entwicklung ist es häufig erforderlich, den Status der Listenseite (z. B. Informationen zur Bildlaufposition) zwischenzuspeichern, wenn von der Liste zur Detailseite gesprungen und dann zur Detailseite zurückgekehrt wird. Zu diesem Zeitpunkt ist es erforderlich, den Status zu speichern und zwischenzuspeichern. Vue bietet eine Keep-Alive-Komponente zum Zwischenspeichern des Status.
Es gibt mehrere Lösungen für das Problem:

1. Verwenden Sie Meta-Tags

1. Notieren Sie zunächst das Attribut „keepAlive“ als „true“ im Meta-Tag in der Route

Pfad: '/klassifizieren',
  Name: 'klassifizieren',
  Komponente: () => import('@/views/classify/classify.vue'),
  Meta: {
    Titel: 'Leishitao-Gutscheine',
    keepAlive: wahr
  }
},

2. Fügen Sie beim Erstellen einer Routerinstanz die Methode scrollBehavior hinzu

exportiere standardmäßig einen neuen Router({
  Modus: "Verlauf",
  Basis: Prozess.Umgebung.BASE_URL,
  Routen,
  scrollBehavior (bis, von, gespeichertePosition) {
    if (gespeichertePosition) {
      Gespeicherte Position zurückgeben
    } anders {
      zurückkehren {
        x: 0,
        j: 0
      }
    }
  }
})

3. Wrappen Sie die Keep-Alive-Komponente auf die Router-View-Komponente, die zwischengespeichert werden muss

<am Leben erhalten>
   <Router-Ansicht v-if='$route.meta.keepAlive'></Router-Ansicht>
</am Leben erhalten>
<Router-Ansicht v-if='!$route.meta.keepAlive'></Router-Ansicht>

4. Da in einigen Fällen Caching erforderlich ist und in anderen nicht, können Sie in der Routing-Hook-Funktion in der zwischengespeicherten Komponente eine Beurteilung vornehmen

beforeRouteLeave (nach, von, weiter) {
    dies.laden = wahr
    wenn (zu.Pfad === '/Warendetail') {
      von.meta.keepAlive = true
    } anders {
      from.meta.keepAlive = false
     // dies.$destroy()
    }
    nächste()
  },

Es kann Komponenten-Caching unterstützen, aber diese Methode hat Fehler. Erstens wird es nicht zwischengespeichert, wenn die Seite zum ersten Mal geöffnet wird, d. h. wenn Sie zum ersten Mal von der Listenseite zur Detailseite springen, gibt es keinen Cache, wenn Sie zurückkommen. Es wird zwischengespeichert, wenn Sie später die Detailseite aufrufen, und nur der Status des ersten Eintrags wird zwischengespeichert und die Daten werden nicht erneut angefordert. Wenn Sie eine Kategorie auf Seite A auswählen und zu Seite B springen und dann von der Listenseite B zur Detailseite springen, wird dieser Status zu diesem Zeitpunkt zwischengespeichert und wird nicht erneut zwischengespeichert, wenn Sie in Zukunft von anderen Kategorien auf Seite A zu Seite B springen, sodass Sie jedes Mal, wenn Sie von der Detailseite zu Seite B zurückkehren, zum Status des ersten Caches springen. Wenn Ihr Projekt nur einen Status hat, der zwischengespeichert werden muss, können Sie die Verwendung dieser Methode in Betracht ziehen

2. Verwenden Sie die Include- und Exclude-Attribute sowie die Hook-Funktion beforeRouteEnter

Lassen Sie mich zunächst die Vue-Dokumentation zum Einschließen und Ausschließen vorstellen: https://cn.vuejs.org/v2/api/#keep-alive
Es handelt sich um ein neues Attribut, das nach vue2.0 hinzugefügt wurde
include ist die Komponente, die zwischengespeichert werden muss;
Ausschließen bedeutet, dass alle Komponenten bis auf einige zwischengespeichert werden.
Mit den Include- und Exclude-Attributen können Komponenten bedingt zwischengespeichert werden. Beide können als Komma-getrennte Zeichenfolge, regulärer Ausdruck oder Array ausgedrückt werden:

<keep-alive include="a,b">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>
 
<!-- Regulärer Ausdruck (mit `v-bind`) -->
<keep-alive :include="/a|b/">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>
 
<!-- Array (mit `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

Die Übereinstimmung wird zunächst mit der eigenen Namensoption der Komponente verglichen. Wenn die Namensoption nicht verfügbar ist, wird sie mit ihrem lokal registrierten Namen verglichen (dem Schlüsselwert der Komponentenoption der übergeordneten Komponente). Anonyme Komponenten können nicht zugeordnet werden.

max wurde erst in 2.5.0 hinzugefügt. Dies ist die maximale Anzahl von Komponenteninstanzen, die zwischengespeichert werden können. Sobald diese Zahl erreicht ist, wird die zwischengespeicherte Komponenteninstanz, auf die am längsten nicht zugegriffen wurde, zerstört, bevor eine neue Instanz erstellt wird.

<am Leben erhalten :max="10">
  <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

aktiviert und deaktiviert.

Stellen Sie kurz vor, dass es in den in Keep-Alive enthaltenen Komponenten/Routen zwei weitere Lebenszyklus-Hooks geben wird: aktiviert und deaktiviert.
Dokumentation: Ab 2.2.0 werden Aktivierung und Deaktivierung in allen verschachtelten Komponenten im Baum ausgelöst.
„activated“ wird aufgerufen, wenn die Komponente zum ersten Mal gerendert wird, und dann jedes Mal, wenn die zwischengespeicherte Komponente aktiviert wird.
Aktivierte Anrufzeit:
Das erste Mal, wenn Sie eine zwischengespeicherte Route/Komponente eingeben, nach der Bereitstellung, bevor der Schutz „beforeRouteEnter“ aufgerufen wird, bevor die Rückruffunktion an „next“ übergeben wird:

beforeMount=> Wenn du von einer anderen Route/Komponente kommst (Komponente zerstört/oder deaktiviert beim Verlassen des Caches)=>mounted=> aktiviert Betrete die Cache-Komponente=> führe den beforeRouteEnter-Callback aus

Da die Komponente zwischengespeichert ist, werden diese Hooks beim erneuten Aufrufen der Cache-Route/Komponente nicht ausgelöst: // beforeCreate erstellt, beforeMount gemountet wird nicht ausgelöst.

disabled: Wenn die Komponente deaktiviert wird (die Route verlässt) und Keep-Alive verwendet wird, werden beforeDestroy (der Hook vor der Komponentenzerstörung) und destroy (Komponentenzerstörung) nicht aufgerufen, da die Komponente nicht zerstört, sondern zwischengespeichert wird.
Dieser Hook kann als Ersatz für beforeDestroy angesehen werden. Wenn Sie eine Komponente zwischenspeichern und etwas tun möchten, wenn die Komponente zerstört wird, können Sie es in diesen Hook einfügen.
Beim Verlassen der Route wird nacheinander Folgendes ausgelöst:

Belassen Sie den aktuellen Route-Hook in der Komponente beforeRouteLeave => Route Front Guard beforeEach => Global Post Hook afterEach => Deaktiviert Lassen Sie die Cache-Komponente => Aktiviert Geben Sie die Cache-Komponente ein (wenn Sie die Cache-Route eingeben

So verwenden Sie den Cache im Projekt:
1. Fügen Sie dem erstellten Routerobjekt wie oben die Methode scrollBehavior hinzu.
2. Fügen Sie dem Include-Attribut die Komponenten hinzu, die zwischengespeichert werden müssen

<keep-alive :include="['home','klassifizieren','suchen']">
      <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

3. Initialisieren Sie in der nächsten Rückruffunktion von beforeRouteEnter die Situation, in der die Seite A nicht zwischengespeichert werden muss, d. h. schreiben Sie die Dinge, die hier in create geschrieben werden sollen. Achten Sie darauf, alle Daten, die initialisiert werden müssen, erneut zu schreiben, da sonst Fehler auftreten. Dies wird daher nicht empfohlen.

beforeRouteEnter (nach, von, weiter) {
    weiter(vm => {
      // Zugriff auf Komponenteninstanz über „vm“ if (from.path !== '/goods_detail') { // Muss aktualisiert werden, wenn Seite B von A aus aufgerufen wird vm.titleText = vm.$route.query.name
        vm.categoryUpper = vm.$route.query.categoryUpper
        vm.Waren = []
        vm.seite = 1
        vm.catsIndex = 0
        vm.is_search = false
        vm.getCats2()// sind die verschiedenen Typen, die ursprünglich in create geschrieben wurden}
    })
  }

3. Verwenden Sie Include- und Exclude-Attribute sowie die Hook-Funktion beforeRouteLeave und vuex (empfohlen).

Die dritte Methode ähnelt der zweiten Methode, außer dass die Komponenten, die zwischengespeichert werden müssen, in globalen Variablen gespeichert werden und Sie in der Routing-Hook-Funktion flexibel steuern können, welche Komponenten zwischengespeichert werden müssen und welche nicht. Im Vergleich zur zweiten Methode müssen die Daten nicht jedes Mal neu initialisiert werden, sondern müssen in vuex gespeichert werden.
Zum Code
1. Fügen Sie dem erstellten Routerobjekt wie oben die Methode scrollBehavior hinzu.
2. Fügen Sie dem Include-Attribut die Komponenten hinzu, die zwischengespeichert werden müssen

<keep-alive :include="catch_components">
      <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

3. Fügen Sie den Variablennamen der zwischenzuspeichernden Komponente und die entsprechende Methode im Store hinzu.

exportiere standardmäßig neuen Vuex.Store({
  Zustand: {
    Fangkomponenten: []
  },
Mutationen:
    GET_CATCHE_COMPONENTS (Status, Daten) {
      state.catch_components = Daten
    }
}
})

4. Steuern Sie die Komponenten, die in der Hook-Funktion beforeRouteLeave zwischengespeichert werden müssen

beforeRouteLeave (to, from, next) { // Um ​​zu steuern, welche Komponenten beim Verlassen der Komponente zwischengespeichert werden müssen, wird andernfalls beim ersten Mal kein Zwischenspeichern durchgeführt this.busy = true
    if (to.path === '/goods_detail') { // Komponenten müssen beim Aufrufen der Detailseite zwischengespeichert werden. In anderen Fällen ist kein Caching erforderlich. this.$store.commit('GET_CATCHE_COMPONENTS', ['home'])
    } anders {
      dies.$store.commit('GET_CATCHE_COMPONENTS', [])
    }
    nächste()
  },

Darüber hinaus stießen wir in unserem Projekt auf das Problem, dass Komponenten wiederverwendet und nicht aktualisiert wurden, wenn die Routen gleich waren, die Parameter jedoch unterschiedlich waren. Vue gab offiziell eine Antwort auf Änderungen der Routenparameter

betrachten:
    '$route' (nach, von) {
      Dokument.Titel = this.$route.query.name
      this.getDefault() //antworte entsprechend den Parameterdaten}

  },

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von keepAlive in vue. Weitere relevante Inhalte zur Verwendung von keepAlive in vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!