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)

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

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>

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

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:

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>

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

; 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!