Vue-Projektoptimierungsmethode durch Keep-Alive-Daten-Caching

Dieser Artikel stellt hauptsächlich die Methode der Vue-Projektoptimierung durch Keep-Alive-Daten-Caching vor. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

ist eine integrierte Komponente von Vue, die den Zustand während des Komponentenwechsels im Speicher behalten kann, um ein wiederholtes Rendern des DOM zu verhindern.

Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören. Wie ist eine abstrakte Komponente: Es rendert kein DOM-Element selbst und erscheint auch nicht in der übergeordneten Komponentenkette.

prop:

1. include: Zeichenfolge oder regulärer Ausdruck. Nur passende Komponenten werden zwischengespeichert.

2. ausschließen: Zeichenfolge oder regulärer Ausdruck. Alle übereinstimmenden Komponenten werden nicht zwischengespeichert.

Reduzieren Sie die Anzahl der Anfragen an den Server durch das von vue Components bereitgestellte Keep-Alive, um das mehrfache Laden entsprechender Komponenten zu vermeiden und den Leistungsverbrauch zu reduzieren. Beispielsweise wurden die Daten einer Seite, darunter Bilder, Text usw., vom Benutzer geladen und der Benutzer springt dann durch Anklicken auf eine andere Oberfläche. Kehren Sie dann von einer anderen Schnittstelle zur ursprünglichen Schnittstelle zurück. Wenn es nicht gesetzt ist, werden die Informationen der ursprünglichen Schnittstelle erneut vom Server angefordert. Das von vue bereitgestellte Keep-Alive kann die angeforderten Daten der Seite speichern, die Anzahl der Anfragen reduzieren und die Benutzererfahrung verbessern.

Caching-Komponenten werden in zwei Typen unterteilt: Komponenten, die die Seiten der gesamten Website zwischenspeichern, und Komponenten, die Teilseiten zwischenspeichern.

1. Alle Seiten zwischenspeichern, geeignet für Situationen, in denen es Anfragen für jede Seite gibt. Die Methode lautet wie folgt: Umschließen Sie die Router-Ansicht, die zwischengespeichert werden muss, mit dem Keep-Alive-Tag.

<keep-alive>
<router-view></router-view>
</keep-alive>

Cache kann erreicht werden, indem die erste Triggeranforderung in den erstellten Hook geschrieben wird. Wenn Sie beispielsweise von der Listenseite zur Detailseite wechseln, befinden Sie sich bei Ihrer Rückkehr immer noch auf der Originalseite.

2. Das Zwischenspeichern einiger Komponenten oder Seiten kann durch die Verwendung des router.meta-Attributs durch Beurteilung erreicht werden. Die Methode ist wie folgt:

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

Die Router-Einstellungen lauten wie folgt:

 routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }
     ]

Es kann auch über das neue Attribut include/exclude festgelegt werden. Der Name impliziert die Bedeutung, „einschließen“ bedeutet „einschließen“ und „ausschließen“ bedeutet „ausschließen“. Hier müssen Sie den Namen der Komponente zum Festlegen verwenden, daher muss der Name hinzugefügt werden. Das Hinzufügen der Komponenten a und b erfordert Caching, während die Komponenten c und d kein Caching erfordern. Es ist wie folgt geschrieben:

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

Die Optimierung des Vue-Projekts kann auch durch das bedarfsgesteuerte Laden von Komponenten erreicht werden, genau wie das Wenn der Kunde diese Bilder überhaupt nicht sah, sie aber alle geladen wurden, als wir die Seite öffneten, würde dies die Anforderungszeit erheblich verlängern und die Benutzererfahrung verringern. Lazy Loading wird auf vielen Websites verwendet, z. B. auf Shopping-Websites wie Taobao, JD.com usw., die viele Bildlinks haben. Wenn Sie schnell nach unten scrollen, wird möglicherweise der Bildladezustand angezeigt. Spezifische Anweisungen zur Verwendung finden Sie in einem anderen Artikel: Vue-Projektoptimierungsseite bei Bedarf laden (vue+webpack)

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für Ihr Studium hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die Verwendung von Vue-Komponentenoptions-Requisiten

Vue.js universelles Anwendungsframework-Nuxt .js-Analyse

Einführung in die Methode zur einfachen Konfiguration von Axios mit vue.js

Das obige ist der detaillierte Inhalt vonVue-Projektoptimierungsmethode durch Keep-Alive-Daten-Caching. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!