Vue verwendet Keep-Alive, um Daten-Caching zu implementieren, ohne die Instanzfreigabe zu aktualisieren

In diesem Artikel wird hauptsächlich die Verwendung von Keep-Alive vorgestellt, um das Zwischenspeichern von Daten ohne Aktualisierung zu erreichen. Interessierte Freunde können darauf verweisen.

Bisher war ich nur kurze Zeit mit Vue vertraut und das Projekt ist bis zu einem gewissen Grad fortgeschritten. Da dem Projekt jedoch ein Caching-Mechanismus fehlt, werden die Daten neu erstellt Jedes Mal, wenn die Seite gesprungen wird, ist die Datenanforderungsgeschwindigkeit des Systems sehr hoch. Dies beeinträchtigt jedoch die Leistung des Systems erheblich. Daher müssen wir hier das System optimieren und Cache hinzufügen.

Tatsächlich beherrsche ich Vue immer noch nicht. Jedes Mal, wenn ich tiefer in die Materie eintauche, werde ich nicht wissen, was ich für die Implementierung von Caching verwenden soll Ich habe lange danach gesucht und es gibt mehrere Möglichkeiten. Mit anderen Worten: Verwenden Sie Vuex, Vuet oder Keep-Alive und vergleichen Sie es dann. Meiner Meinung nach implementieren Vuex und Vuet die Statusverwaltung, und der Schwerpunkt liegt auf Daten Verarbeitung; wenn Sie eine allgemeine Zwischenspeicherung erreichen und die Aktualisierung der erstellten Dateien verhindern möchten, müssen Sie Keep-Alive verwenden.

Hier möchte ich Ihnen vorstellen, wie Sie Keep-Alive verwenden, um zwischengespeicherte Seiten zu implementieren. Es ist eigentlich ganz einfach, nur ein paar Sätze.

1. Keep-Alive muss in Verbindung mit Router-View verwendet werden. Hierbei ist zu beachten, dass Keep-Alive selbst eine Funktion von vue2.0 ist, nicht von vue-router, also von vue1.0 Version wird nicht unterstützt. Das offizielle Dokument von Keep-Alive ist hier. Die Router-Ansicht ist im Eingang APP.vue

<template>
 <p id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--这里是其他的代码-->
 </p>
</template>

2 Ein Nachteil besteht jedoch darin, dass alle Komponenten zwischengespeichert werden. In Wirklichkeit müssen jedoch einige unserer Seiten aktualisiert werden, z. B. wenn wir Details anzeigen möchten Komponente und aktualisieren Sie einfach die Seite, damit diese gemeinsam genutzte Komponente nicht zwischengespeichert werden kann, da sonst andere Einträge zuvor zwischengespeicherte Daten enthalten. Wie kann man es also anpassen? Dann müssen Sie ein v-if-Urteil in der Router-Ansicht hinzufügen und dann „meta:{keepAlive:true}“ zu der Seite hinzufügen, die Sie in der vom Router definierten Datei zwischenspeichern möchten Sie möchten es nicht. Der Cache ist „meta:{keepAlive:false}“ oder wird nicht geschrieben. Nur wenn er wahr ist, wird er von Keep-Alive erkannt und dann zwischengespeichert.

<template>
 <p id="app">
  <!--缓存想要缓存的页面，实现后退不刷新-->
  <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--这里是其他的代码-->
 </p>
</template>

3. Meta-Urteil zur Router-Datei hinzufügen

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  {//home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不会被缓存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

Möchten Sie sehen, ob es vorhanden ist Ist der Cache erfolgreich, können Sie das Ausgabeflag im Erstellungs-Hook jeder Komponente drucken. Der Cache ist erfolgreich, wenn Sie die Seite zum ersten Mal aufrufen. Die Daten werden jedoch nicht erneut angefordert Rufen Sie den Cache direkt auf

Das Hinzufügen des Caches kann den Schaden an der Systemleistung erheblich reduzieren. Schließlich sind die Daten in einem Datenverarbeitungssystem zu groß und es ist nicht gut, jedes Mal eine Seite anzufordern . Mit Cache kann der Cache in Echtzeit ohne Zwischenspeicherung aktualisiert werden.

Verwandte Empfehlungen:

AngularJS-Lösung für Daten-Caching-Probleme im 360-Kompatibilitätsmodus

PHP WeChat-Entwicklung verwendet Cache, um Daten-Caching zu lösen

Detaillierte Erklärung des WeChat-Applet-Daten-Caching mit Bildern und Text

Das obige ist der detaillierte Inhalt vonVue verwendet Keep-Alive, um Daten-Caching zu implementieren, ohne die Instanzfreigabe zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!