Ausführliche Erklärung zur Verwendung von keepAlive im vue3-Projekt

In diesem Artikel erfahren Sie ausführlich, wie Sie Keepalive im Vue-Projekt verwenden. Seine Funktion besteht darin, Komponenten im Speicher zwischenzuspeichern, um ein wiederholtes Rendern des DOM zu verhindern, das die Speichererfassungsgeschwindigkeit beansprucht. Ich hoffe, es hilft allen.

Die übliche Verwendung besteht darin, Komponenten oder Routen zwischenzuspeichern. Es gibt einige Unterschiede zwischen der vorhandenen Verwendung vue2.x und vue3.x. Im Folgenden wird hauptsächlich die Verwendung von keepaliev in vue3.0 beschrieben.

Normalerweise können wir den gesamten Seitencache konfigurieren oder nur einer bestimmten Komponente erlauben, Cache-Informationen zu verwalten. Wenn die Keepalive-Route oder -Komponente konfiguriert ist, wird der erstellte->gemountete Lebenszyklus nur ausgeführt, wenn die Seite zum zweiten Mal initialisiert wird und später, wenn Sie die Seite erneut aufrufen, wird der Lebenszyklus nicht ausgeführt, aber die Cache-Informationen werden gelesen.

1. Router-Konfigurationscache

1)Schritt 1: App.vue konfigurieren
Es gibt Unterschiede in der App.vue-Konfiguration zwischen vue2.x und vue3.0. Die App.vue-Konfigurationsinformationen sind wie folgt :
vue2. Hier ist die Seitenbindung, die der Route entspricht.

2)

Zweiter Schritt: Metaattribut hinzufügen

Fügen Sie ein Metaattribut auf der entsprechenden Route hinzu, um wie folgt festzulegen, ob die Seite Caching verwenden soll:

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/></template>

An diesem Punkt kann ein einfaches Caching der Seite erreicht werden, aber einiges Szenarien müssen durchgeführt werden Komplexe Verarbeitung, zum Beispiel muss ein Teil der Seiteninformationen nicht aus dem Cache gelesen werden und muss bei jeder Eingabe verarbeitet werden. Zu diesem Zeitpunkt können wir den aktivierten Lebenszyklus verwenden, um das Problem zu lösen Problem der teilweisen Seitenaktualisierung.
3) Teilweise Seitenaktualisierung realisieren

Verstehen Sie zunächst den Lebenszyklus von Vue,

Von keepAlive umschlossene Komponenten und Seiten, der Lebenszyklus, der beim Aufrufen der Seite ausgeführt wird, ist: erstellt->montiert->aktiviert
; Unter anderem wird „created->mount“ nur ausgeführt, wenn die Seite zum ersten Mal aufgerufen wird. Der aktivierte Lebenszyklus wird jedes Mal ausgeführt, wenn die Seite aufgerufen wird. Es handelt sich also um einen Lebenszyklus von keepAlive Vorgänge, die jedes Mal ausgeführt werden müssen, wenn die Seite in diesen Lebenszyklus gelangt, reichen aus. Der folgende Code:

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> </template>

Die implementierte Funktion besteht darin, den dynamischen Bestätigungscode bei jeder Eingabe durch den Benutzer zu leeren. Diese Funktion kann auch auf andere Weise implementiert werden, z. B. durch Entfernen der Komponente aus dem Cache (siehe 2. Komponente). Konfigurationscache).

4)

Legen Sie das KeepAlive-Attribut der Route dynamisch fest

Manchmal möchten wir, dass die Seite nicht mehr zwischengespeichert bleibt, nachdem wir den KeepAlive-Cache aufgebraucht haben, oder legen Sie den KeepAlive-Wert der nächsten Seite fest Meta zum Entfernen des Seitencaches. Verwenden Sie beforeRouteEnter, beforeRouteUpdate und beforeRouteLeave. Die Verwendung ist wie folgt:

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

2. Komponentenkonfigurationscache

Normalerweise werden wir eine Seite von Vue zwischenspeichern, aber manchmal Wir müssen nur die Seite zwischenspeichern. Eine bestimmte Komponente, oder wenn eine dynamische Komponentenkomponente zum Wechseln von Komponenten verwendet wird, muss die Komponente zwischengespeichert werden. 2) Von der Cache-Seite angegebene Komponenten

Bei Verwendung in App.vue sind die Seiten, die allen Routen entsprechen, die Komponenten, die dem Projekt entsprechen. Die Verwendungsmethode ist wie folgt:

Verwenden Sie die Attribute „Einschließen“ oder „Ausschließen“ für das Keep-Alive Komponente wie folgt: Die Verwendung von include

bedeutet, dass die Komponente mit dem Namen testKA zwischengespeichert wird

activated() {
	// 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';},

Auf der Seite, die dem Router entspricht, müssen Sie das Namensattribut wie folgt festlegen:

// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();}

Darüber hinaus ist die Verwendung von include erforderlich lautet wie folgt:

// APP.vue文件，将页面作为组件缓存<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive></router-view>

Die Verwendung von „exclude“ ist die gleiche wie die Verwendung von „include“. Stellt Komponenten dar, die nicht zwischengespeichert werden. Darüber hinaus verfügt Keep-Alive auch über ein Max-Attribut, das die maximale Anzahl zwischengespeicherter Komponenten angibt. Sobald diese Zahl erreicht ist, wird die Instanz der zwischengespeicherten Komponente, auf die am längsten nicht zugegriffen wurde, zerstört, bevor eine neue Instanz verfügbar ist erstellt.

export default {
    name:'testKA',// keep-alive中include属性匹配组件name
    data() {return {}},
    activated() {
        // keepalive缓存的页面每次进入都会进行的生命周期
    },}

Bei Verwendung zum Komponentenwechsel auf einer bestimmten Seite ist die Verwendung dieselbe wie beim Cache-Routing, die Seite wird jedoch nur auf eine Komponente herabgestuft, und die übergeordnete Komponente wird von App.vue auf die entsprechende Routing-Seite herabgestuft.

3) Zusammenfassung

Im eigentlichen Kampfprozess, als festgestellt wurde, dass die Keepalive-Cache-Komponente

nicht über Ebenen hinweg verwendet werden kann

; zum Beispiel bei Verwendung des Include-Attributs in App.vue, um mit name="a" übereinzustimmen , der Cache-Name kann nur mit der Unterkomponente von a (Routing-Seite) abgeglichen werden, aber die Enkelkomponente mit dem Namen „a“ (die von der Unterseite referenzierte Komponente) kann nicht zwischengespeichert werden.

Wenn Sie die Enkelkomponente zwischenspeichern möchten, können Sie die gesamte Unterkomponente zwischenspeichern oder Keepalive in der Unterkomponente verwenden. Anweisungen zur Verwendung von Keepalive finden Sie auf der offiziellen Website: https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

[Verwandte Empfehlungen: „vue.js Tutorial》】

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von keepAlive im vue3-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!