Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching

Hintergrund:

• Im komponentenbasierten Entwicklungsmodell teilen wir das gesamte Projekt in viele Komponenten auf und organisieren diese dann auf sinnvolle Weise, um den gewünschten Effekt zu erzielen.
• Da die Seite aus mehreren Komponenten besteht, besteht natürlich ein Problem beim Wechseln zwischen Komponenten. Vue schlägt auch das Konzept dynamischer Komponenten vor, mit dem wir den Wechseleffekt zwischen Komponenten besser erzielen können. Das Wechseln von Komponenten in Vue ist jedoch tatsächlich der Prozess des Neuerstellens und Zerstörens der Komponenten selbst. In einigen Szenarien möchten wir nicht, dass die Komponenten neu erstellt und erneut gerendert werden.

Tatsächliches Szenario: Der Benutzer bedient sich einer Listenseite --> Detailseite --> Listenseite. Der zu diesem Zeitpunkt zu erzielende Effekt ist, dass die Originalseite unverändert bleibt, wenn der Benutzer von der Detailseite zurück zur Listenseite wechselt, und nicht erneut gerendert wird. Zu diesem Zeitpunkt muss die Originallistenseite zwischengespeichert werden, wenn der Benutzer von der Listenseite zur Detailseite wechselt.

Dieser Artikel stellt hauptsächlich das Umschalten von Komponenten in Vue und die Cache-Lösung vor

1. Komponentenwechselmethode

Methode 1: Verwenden Sie v-if und v-else

// Wenn die Variable Flag wahr ist, wird die Komponente comp-a angezeigt, andernfalls wird die Komponente comp-b angezeigt <comp-a v-if="flag"></comp-a>

<comp-b v-else></comp-b>

Methode 2: Integrierte Komponenten verwenden: <component></component>

// Klicken Sie hier, um die Komponenten „Anmeldung“, „Registrierung“ und „Beenden“ zu wechseln <template>
     <div>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">Anmelden</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">Registrieren</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">Abmelden</a>
        
        // <component></component> um die Komponente mit dem entsprechenden Namen anzuzeigen, der einem Platzhalter entspricht // Das Attribut :is gibt den Komponentennamen an <component :is="comName"></component>
      </div>
    </Vorlage>

Methode 3: vue-router

// Routing-Regeln:
  {
    Pfad: '/login',
    Name: 'Anmelden',
    Komponente: () => import('../views/login.vue')
  },
  {
    Pfad: '/register',
    Name: 'register',
    Komponente: () => import('../views/register.vue')
  },
  
  //Wo die Komponente angezeigt werden soll:
   <Router-Ansicht />

2. Komponenten-Caching: Keep-Alive

Zwischenspeichern Sie Komponenten nach Bedarf, anstatt sie zu zerstören und neu zu erstellen, wie im tatsächlichen Szenario am Anfang dieses Artikels

1.Keep-Alive-Definition

Wenn <keep-alive> um eine dynamische Komponente gewickelt ist, werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden.

<keep-alive> ist eine abstrakte Komponente: Es rendert selbst kein DOM-Element und erscheint auch nicht in der übergeordneten Komponentenkette. Wenn eine Komponente innerhalb von <keep-alive> umgeschaltet wird, werden ihre activated und deactivated Lifecycle-Hook-Funktionen entsprechend ausgeführt.

2.Keep-Alive-Lebenszyklus

aktiviert

Wird aufgerufen, wenn die keep-alive -Komponente aktiviert wird. Diese Hook-Funktion wird beim serverseitigen Rendering nicht aufgerufen.

deaktiv

Dieser Hook wird aufgerufen, wenn die keep-alive -Komponente deaktiviert ist. Beim serverseitigen Rendering wird er nicht aufgerufen.

Komponenten, die im keep-alive erstellt werden, haben zwei weitere Lifecycle-Hooks: activated und deactivated
Durch die Verwendung von keep-alive bleiben die Daten im Speicher. Wenn Sie bei jedem Aufrufen der Seite die neuesten Daten abrufen möchten, müssen Sie die Daten in der aktivierten Phase abrufen und die Aufgabe des Abrufens der Daten in der ursprünglichen Hook-Funktion created übernehmen.

Hinweis: Diese beiden Lebenszyklusfunktionen werden nur aufgerufen, wenn die Komponente in Keep-Alive gekapselt ist. Bei Verwendung als normale Komponente werden sie nicht aufgerufen. Nach Version 2.1.0 werden diese beiden Hook-Funktionen nach der Verwendung von exclude auch dann nicht aufgerufen, wenn es in Keep-Alive gekapselt ist! Darüber hinaus wird diese Hook-Funktion beim Rendern auf der Serverseite nicht aufgerufen.

Komponenten mit eingerichtetem Cache:

• Erster Eintrag: beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave
• Nachfolgender Eintrag: beforeRouterEnter ->activated->deactivated> beforeRouteLeave

3. So verwenden Sie Keep-Alive

1. Requisiten

include – Zeichenfolge oder Array, regulärer Ausdruck. Es werden nur Komponenten mit übereinstimmenden Namen zwischengespeichert --> der Wert von include ist name der Komponente.
exclude – eine Zeichenfolge oder ein regulärer Ausdruck. Komponenten mit übereinstimmenden Namen werden nicht zwischengespeichert.
max : eine Zahl. Die maximale Anzahl an Komponenten, die zwischengespeichert werden können.

2. Verwendung mit <component></component>

  <Vorlage>
     <div>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">Anmelden</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">Registrieren</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">Abmelden</a>
     
     // Die Login-Komponente wird zwischengespeichert. Wenn include nicht gesetzt ist, werden alle an <component></component> gemounteten Komponenten standardmäßig zwischengespeichert. // Mehrere angegebene Komponenten zwischenspeichern include = ['login', 'register']
      <keep-alive include="Anmelden">
          <Komponente: ist = "comName"></Komponente>
      </am Leben erhalten>    
      </div>
    </Vorlage>

3. Verwendung mit <router-view />-Routing

Das keepAlive -Attribut der Routing- meta muss konfiguriert werden
Der keep-alive -Code kann mit v-if kombiniert werden, um ihn zu umschließen. Wenn keepAlive in Meta true ist, wird es zwischengespeichert, andernfalls nicht. Dies kann flexibler sein.

 {
    Pfad: '/login',
    Name: 'Anmelden',
    Komponente: () => import('../views/login.vue')
    Meta:{
        keepAlive : true // Login-Komponente wird zwischengespeichert}
  },
  {
    Pfad: '/register',
    Name: 'register',
    Komponente: () => import('../views/register.vue'),
      Meta:{
        keepAlive : false // Registerkomponente wird nicht zwischengespeichert}
  },

<Router-Ansicht />:

<div id="app">
    <am Leben erhalten> 
    <!-- Komponenten anzeigen, die zwischengespeichert werden müssen-->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </am Leben erhalten>
    
    <!-- Komponenten anzeigen, die kein Caching benötigen --> 
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

4. Cache-Komponenten löschen

 // beforeRouteLeave() hook // Bestimmen, ob zur Detailseite gegangen werden soll beforeRouteLeave(to, from, next) {
      if (to.path === "/warendetail") {
        von.meta.keepAlive = wahr;
      } anders {
        von.meta.keepAlive = falsch;
        // dies.$destroy()
      }
      nächste();
    }

Dies ist das Ende dieses Artikels über Vue-Komponentenwechsel, dynamische Komponenten und Komponenten-Caching. Weitere relevante Inhalte zu Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!