So verwenden Sie Keep-Alive, um den Routenwechseleffekt im Vue-Projekt zu optimieren

So verwenden Sie Keep-Alive, um den Routenwechseleffekt in Vue-Projekten zu optimieren

In Vue-Projekten ist der Routenwechsel ein häufiger Vorgang. Wenn wir jedoch häufig die Route wechseln, werden wir feststellen, dass Komponenten und Daten bei jedem Wechsel neu geladen werden, was zu einem langsamen Laden der Seite und einer schlechten Benutzererfahrung führt. Um dieses Problem zu lösen, können wir die Keep-Alive-Komponente von Vue verwenden, um den Routing-Switching-Effekt zu optimieren.

keep-alive ist eine von Vue bereitgestellte abstrakte Komponente, die außerhalb der Komponente verpackt werden kann, die zwischengespeichert werden muss, um den Status der Komponente zwischenzuspeichern und ein wiederholtes Rendern der Komponente zu vermeiden. Beim Routenwechsel können Sie dynamisch steuern, ob Caching aktiviert werden soll, indem Sie das Metaattribut der Route festlegen. Schauen wir uns als Nächstes an, wie Sie mit Keep-Alive den Routing-Switching-Effekt im Vue-Projekt optimieren. 🔜 ermöglicht. Beispiel:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      keepAlive: true
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      keepAlive: false
    }
  }
]

1. Verwenden Sie die Keep-Alive-Komponente in App.vue.

Fügen Sie außerhalb des -Tags das -Tag hinzu und setzen Sie das Attribut include auf Erfordert den Namen der Caching-Komponente. Zum Beispiel:

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

<script>
export default {
  computed: {
    keepAliveComponents() {
      // 获取带有meta.keepAlive属性的组件名
      const routes = this.$router.options.routes;
      const keepAliveComponents = routes
        .filter(route => route.meta && route.meta.keepAlive)
        .map(route => route.name);
      return keepAliveComponents;
    }
  }
};
</script>

Im obigen Code verwenden wir das berechnete Attribut keepAliveComponents, um den Komponentennamen mit dem Attribut meta.keepAlive abzurufen und ihn auf den Wert des Attributs include zu setzen.

Verwenden Sie aktivierte und deaktivierte Hook-Funktionen in Komponenten, die zwischengespeichert werden müssen.

In Komponenten, die zwischengespeichert werden müssen, können Sie aktivierte und deaktivierte Hook-Funktionen verwenden, um die Aktivierungs- und Deaktivierungsereignisse der Komponente abzuhören. Im Aktivierungsfall können entsprechende Datenanfragen oder andere Vorgänge durchgeführt werden; im Deaktivierungsfall können Daten bereinigt oder andere Verarbeitungen durchgeführt werden. Zum Beispiel:

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  activated() {
    // 组件激活时执行的操作
  },
  deactivated() {
    // 组件停用时执行的操作
  }
};
</script>

Durch die Verwendung aktivierter und deaktivierter Hook-Funktionen können Sie den Lebenszyklus und die Datenverarbeitung der Komponente besser steuern.

Testen der Wirkung

Nach Abschluss der oben genannten Schritte können wir die Wirkung von Keep-Alive testen. Wenn beim Routenwechsel die Eigenschaft meta.keepAlive wahr ist, wird die Komponente zwischengespeichert. Andernfalls wird sie nicht zwischengespeichert.

Zusammenfassung:
4. Durch die Verwendung der Keep-Alive-Komponente von Vue können wir den Routing-Switching-Effekt einfach optimieren, das wiederholte Laden von Komponenten und Daten vermeiden und die Geschwindigkeit beim Laden von Seiten und die Benutzererfahrung verbessern. In der Projektentwicklung sollte Keep-Alive flexibel je nach tatsächlichem Szenario eingesetzt und mit aktivierten und deaktivierten Hook-Funktionen zur Datenverarbeitung und -optimierung kombiniert werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Keep-Alive, um den Routenwechseleffekt im Vue-Projekt zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!