So nutzen Sie das Keep-Alive von Vue, um die Seitenleistung zu optimieren

So nutzen Sie Vues Keep-Alive, um die Seitenleistung zu optimieren

Einführung:
Bei der Entwicklung von Vue-Projekten stoßen wir häufig auf die Situation: Beim Wechseln zwischen Seiten möchten wir die Komponenteninstanz der aktuellen Seite nicht zerstören, sondern zwischenspeichern um die Leistung bei Ihrem nächsten Besuch zu verbessern. Vue stellt die Keep-Alive-Komponente bereit, mit der die Caching-Funktion der Komponente problemlos implementiert werden kann. In diesem Artikel wird detailliert beschrieben, wie Sie Keep-Alive zur Optimierung der Seitenleistung verwenden.

1. Einführung in Keep-Alive-Komponenten
Vues Keep-Alive-Komponente ist eine abstrakte Komponente, die die Komponenten, die sie umschließt, zwischenspeichern und die Komponenteninstanzen beim nächsten Besuch direkt rendern kann, wodurch ein wiederholter Aufwand für die Erstellung und Zerstörung von Komponenten vermieden wird. wodurch die Leistung verbessert wird.

2. Die grundlegende Verwendung der Keep-Alive-Komponente ist sehr einfach. Sie müssen nur ein 0a8c88b74c0d4e7d53c6011e2896741d-Tag verschachteln, zum Beispiel:

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

In Der obige Code 975b587bf85a482ea10b0a28848e78a4 ist der von Vue Router bereitgestellte Routing-Ausgang. Wir können ihn durch jede Komponente ersetzen, die zwischengespeichert werden muss.

3. Eigenschaften und Ereignisse von Keep-Alive

Keep-Alive bietet einige Eigenschaften und Ereignisse zur Steuerung und Überwachung des Lebenszyklus des Komponentencaches.

Attribute
1. Keep-Alive-Komponenten haben zwei Hauptattribute:
   

• include: ein Array, das die Namen der Komponenten angibt, die zwischengespeichert werden müssen. Nur durch das Include-Attribut angegebene Komponenten werden zwischengespeichert, andere Komponenten werden nicht zwischengespeichert. Beispiel:

  <keep-alive :include="['Home', 'About']">
  <router-view></router-view>
  </keep-alive>

  Im obigen Code werden nur Komponenten mit den Namen „Home“ und „Info“ zwischengespeichert, andere Komponenten werden nicht zwischengespeichert.

• exclude: Geben Sie ein Array von Komponentennamen an, die nicht zwischengespeichert werden müssen. Durch das Ausschlussattribut angegebene Komponenten werden nicht zwischengespeichert, andere Komponenten werden jedoch zwischengespeichert. Beispiel:

  <keep-alive :exclude="['Login']">
  <router-view></router-view>
  </keep-alive>

  Im obigen Code wird die Komponente namens Login nicht zwischengespeichert, andere Komponenten werden jedoch zwischengespeichert.

Events
2. Keep-Alive-Komponente bietet zwei Ereignisse zur Überwachung des Lebenszyklus von Cache-Komponenten:
   

• activated: wird ausgelöst, wenn die Komponente aktiviert wird. Beispiel:

  <keep-alive @activated="handleActivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleActivated() {
    console.log('Component activated');
  }
  }

  Im obigen Code wird beim Aktivieren der Komponente die Methode handleActivated aufgerufen, um ein Protokoll zu drucken.

• deaktiviert: Wird ausgelöst, wenn die Komponente deaktiviert ist. Beispiel:

  <keep-alive @deactivated="handleDeactivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleDeactivated() {
    console.log('Component deactivated');
  }
  }

  Im obigen Code wird beim Deaktivieren der Komponente die Methode handleDeactivated aufgerufen, um ein Protokoll zu drucken.

4. Beispieldemonstration

Nachfolgend demonstrieren wir anhand eines praktischen Beispiels, wie man Keep-Alive zur Optimierung der Seitenleistung nutzt.

1. Erstellen Sie ein Vue-Projekt und installieren Sie den Vue-Router:

   vue create keep-alive-demo
   cd keep-alive-demo
   vue add router

2. Ändern Sie die Datei src/App.vue und schließen Sie 975b587bf85a482ea10b0a28848e78a4 in das Tag 7c9485ff8c3cba5ae9343ed63c2dc3f7 ein Fügen Sie in der Datei src/router/index.js zwei Routen hinzu, die den beiden Komponenten entsprechen, die zwischengespeichert werden müssen:

   <template>
     <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
     </div>
   </template>

3. Erstellen Sie die Komponenten Home.vue und About.vue im Verzeichnis src/views und füllen Sie die aus Inhalt:

   Home.vue:

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '@/views/Home.vue';
   import About from '@/views/About.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
    path: '/',
    name: 'Home',
    component: Home,
     },
     {
    path: '/about',
    name: 'About',
    component: About,
     },
   ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   
   export default router;

4. About.vue:
   

   <template>
     <div>
    <h1>Home</h1>
    <button @click="handleButtonClick">Click me</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
     },
   };
   </script>

   Bisher haben wir ein einfaches Beispiel für die Verwendung von Keep-Alive zur Optimierung der Seitenleistung fertiggestellt.

Fazit:

Durch die Verwendung der Keep-Alive-Komponente von Vue können wir die Caching-Funktion der Komponente einfach implementieren und so die Rendering-Leistung der Seite verbessern. In tatsächlichen Projekten können einige häufig aufgerufene und betriebene Komponenten nach Bedarf zwischengespeichert werden, um eine wiederholte Erstellung und Zerstörung von Komponenten zu vermeiden und das interaktive Erlebnis des Benutzers zu optimieren. Ich hoffe, dieser Artikel hilft Ihnen, Keep-Alive zu verstehen und zu verwenden!

Das obige ist der detaillierte Inhalt vonSo nutzen Sie das Keep-Alive von Vue, um die Seitenleistung zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!