So optimieren Sie durch Keep-Alive in Vue

In diesem Artikel wird hauptsächlich die Methode der Vue-Projektoptimierung durch Keep-Alive-Daten-Caching vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Schauen wir uns den Editor an.

ist eine integrierte Komponente von Vue. Sie kann den Status während des Komponentenwechsels beibehalten, 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 bereitgestellte Keep-Alive, um die entsprechenden Komponenten mehrmals zu laden, um 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 gesamten Seiten der Website zwischenspeichern, und Komponenten, die Teilseiten zwischenspeichern.

1. Alle Seiten zwischenspeichern, geeignet für Situationen, in denen jede Seite eine Anfrage hat. 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 realisiert 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>

Router wird wie folgt eingestellt:

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

kann auch über das neue Attribut include/exclude gesetzt 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 lautet wie folgt:

<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 verzögerte Laden von Bildern, wenn der Kunde diese Bilder überhaupt nicht sieht , aber wir öffnen die Seite, wenn alles geladen ist, was die Anforderungszeit erheblich verlängert und die Benutzererfahrung verringert. 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: On-Demand-Laden von Seiten zur Vue-Projektoptimierung (vue+webpack)

Das Obige habe ich für Sie zusammengestellt, ich hoffe, dass es so sein wird hilfreich für Sie in der Zukunft.

Verwandte Artikel:

So verwenden Sie JQUERY, um mehrere AJAX-Anfragen zu implementieren

So verwenden Sie das Formulardatenformat zum Übertragen von Dateien NodeJs

So implementieren Sie das verzögerte Laden von Bildern im WeChat-Miniprogramm

So verwenden Sie js, um einen Fokusbildeffekt zu erzielen

Das obige ist der detaillierte Inhalt vonSo optimieren Sie durch Keep-Alive in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!