7 Möglichkeiten zum Schreiben einer Vue v-for-Schleife

Dies ist insbesondere in folgenden Situationen nützlich:

• Rendern eines Arrays oder einer Liste
• Iterieren über Objekteigenschaften
  

Die grundlegendste Verwendung der v-for-Schleife in Vue ist diese:

<ul>
  <li v-for='Produkt in Produkten'>
    {{ produkt.name }}
  </li>
</ul>

In diesem Artikel sehen wir uns jedoch einige tolle Möglichkeiten an, wie Sie Ihren v-for Code präziser, vorhersehbarer und effizienter machen können.

Lasst uns anfangen.

1. Verwenden Sie in v-for-Schleifen immer den Schlüssel

Zunächst besprechen wir eine gängige Best Practice, die den meisten Vue Entwicklern bereits bekannt ist: die Verwendung von :key in einer v-for-Schleife. Durch das Festlegen einer eindeutigen Schlüsseleigenschaft können Sie sicherstellen, dass die Komponente wie erwartet funktioniert.

Wenn wir :key nicht verwenden, macht Vue den DOM so effizient wie möglich. Dies kann dazu führen, dass v-for Elemente in der falschen Reihenfolge angezeigt werden oder sich auf andere Weise unvorhersehbar verhalten.

Wenn wir über eine eindeutige Schlüsselreferenz zu jedem Element verfügen, können wir das DOM vorhersehbarer manipulieren.

<ul>
  <li 
    v-for='Produkt in Produkten'
    :Schlüssel='Produkt._ID'  
  >
    {{ produkt.name }}
  </li>
</ul>

2. Verwenden Sie die v-for-Schleife in einem bestimmten Umfang

Während v-for meistens zum Durchlaufen von Arrays oder Objekten verwendet wird, gibt es auch Fälle, in denen wir nur eine bestimmte Anzahl von Iterationen durchführen möchten.

Nehmen wir beispielsweise an, wir erstellen ein Paginierungssystem für einen Online-Shop und möchten nur 10 Produkte pro Seite anzeigen. Mithilfe einer Variablen zum Verfolgen der aktuellen Seitenzahl können Sie die Seitennummerierung auf diese Weise handhaben.

<ul>
  <li v-für='Index in 10' :Schlüssel='Index'>
    {{ Produkte[Seite * 10 + Index] }}
  </li>
</ul>

3. Vermeiden Sie die Verwendung von v-if in Schleifen

Ein sehr häufiger Fehler ist die Verwendung von v-if zum Filtern von Daten in v-for Schleife.

Dies mag zwar intuitiv erscheinen, kann jedoch zu großen Leistungsproblemen führen – VueJS priorisiert v-for-Direktiven gegenüber v-if-Direktiven.

Dies bedeutet, dass die Komponente jedes Element durchläuft, bevor sie die v-if -Bedingung überprüft, um festzustellen, ob es gerendert werden soll.

Wenn Sie v-if mit v-for verwenden, wird jedes Element im Array durchlaufen, unabhängig von der Bedingung.

// Schlechte Praxis!
<ul>
  <li 
    v-for='Produkt in Produkten' 
    :Schlüssel='Produkt._ID' 
    v-if='Produkt.imVerkauf'
  >
    {{ produkt.name }}
  </li>
</ul>

Also, wo liegt das Problem?

Angenommen, products Array umfasst Tausende von Artikeln, Sie möchten aber nur die drei Produkte darstellen, die derzeit im Angebot sind.

Bei jedem erneuten Rendern muss Vue diese Tausenden von Artikeln durchlaufen, obwohl sich an den drei verkauften Produkten überhaupt nichts geändert hat.

Sie müssen versuchen, die gemeinsame Verwendung von v-if und v-for zu vermeiden.

Als nächstes werden zwei alternative Ansätze beschrieben.

4. Verwenden Sie berechnete Eigenschaften oder Methoden

Um die oben genannten Probleme zu vermeiden, sollten wir die Daten filtern, bevor wir sie in der Vorlage iterieren. Hierzu gibt es zwei sehr ähnliche Möglichkeiten:

• Verwenden computed Eigenschaften
• Filtermethode verwenden
  

Die Wahl liegt bei Ihnen, aber lassen Sie uns kurz beide Methoden durchgehen.

Zuerst müssen wir nur eine computed Eigenschaft einrichten. Um die gleiche Funktionalität wie das vorherige v-if zu erhalten, würde der Code folgendermaßen aussehen.

<Vorlage>
  <ul>
    <li v-for="Produkte in Produkte im Angebot" :key="product._id">
      {{ produkt.name }}
    </li>
  </ul>
</Vorlage>

<Skript>
  Standard exportieren {
    Daten () {
      zurückkehren {
        Produkte: []
      }
    },
    berechnet: {
      Produkte im Angebot: Funktion () {
        gib diesen.Produkte.Filter zurück(Produkt => Produkt.imVerkauf)
      }
    }
  }
</Skript>

Die Vorteile sind:

• Dateneigenschaften werden nur dann neu ausgewertet, wenn sich Abhängigkeiten ändern
• Die Vorlage iteriert nur über die Produkte im Angebot, nicht über jedes Produkt
  

Der Code für die Verwendung der Filtermethode ist fast derselbe, aber durch die Verwendung der Filtermethode ändert sich die Art und Weise, wie Sie auf den Wert innerhalb der Vorlage zugreifen. Wenn wir jedoch Variablen an den Filterprozess übergeben möchten, sollten wir die Methode route wählen.

<Vorlage>
  <ul>
    <li v-for="Produkte in Produkte im Angebot(50))" :key="Produkt._id">
      {{ produkt.name }}
    </li>
  </ul>
</Vorlage>

<Skript>
  Standard exportieren {
   Daten () {
    zurückkehren {
     Produkte: []
    }
   },
   Methoden: {
    Produkte im Angebot (max. Preis) {
     gib diesen.Produktfilter zurück(Produkt => Produkt.imVerkauf && Produkt.Preis < maxPreis)
    }
   }
  }
</Skript>

5. Oder wickeln Sie eine Schicht Elemente um die Schleife

Möglicherweise möchten Sie v-for dennoch mit v-if kombinieren, wenn Sie entscheiden, ob die Liste überhaupt gerendert werden soll.

Was wäre beispielsweise, wenn wir eine Produktliste nur dann rendern möchten, wenn der Benutzer angemeldet ist?

Fehlercode:

<ul>
  <li 
    v-for='Produkt in Produkten' 
    :Schlüssel='Produkt._ID' 
    v-if='isLoggedIn' <!-- HIER -->
  >
    {{ produkt.name }}
  </li>
</ul>

Was ist daran falsch?

Das Gleiche wie vorher. Die Vue Vorlage berücksichtigt v-for , führt also eine Schleife über jedes Element aus und prüft v-if .

Dies führt zu einer Schleife über Tausende von Elementen, auch wenn am Ende nichts gerendert wird.

Eine einfache Lösung für dieses Beispiel besteht darin, die v-if-Anweisung zu verschieben.

Besserer Code!

<ul v-if='isLoggedIn'> <!-- Viel besser -->
  <li 
    v-for='Produkt in Produkten' 
    :Schlüssel='Produkt._ID' 
  >
    {{ produkt.name }}
  </li>
</ul>

Das ist viel besser, denn wenn isLoggedIn “ false ist, ist überhaupt keine Iteration erforderlich.

6. Zugriff auf Indizes in Schleifen

Anstatt über das Array zu iterieren und auf jedes Element zuzugreifen, können wir auch den Index jedes Elements verfolgen.

Dazu müssen wir nach dem Element einen Indexwert hinzufügen. Dies ist sehr einfach, kann aber für die Seitennummerierung, die Anzeige von Listenindizes, die Anzeige von Ranglisten usw. nützlich sein.

<ul>
  <li v-for='(Produkte, Index) in Produkten' :key='Produkt._id' >
    Produkt #{{ index }}: {{ product.name }}
  </li>
</ul>

7. Iterationsobjekte

Bisher haben wir uns nur die Verwendung von v-for zum Iterieren über ein Array angesehen. Wir können aber auch leicht lernen, über die Schlüssel-Wert-Paare eines Objekts zu iterieren.

Ähnlich wie beim Zugriff auf den Index eines Elements müssen wir der Schleife einen weiteren Wert hinzufügen. Wenn wir eine Schleife über ein Objekt mit einem einzelnen Argument ausführen, führen wir eine Schleife über alle Elemente aus.

Wenn wir einen weiteren Parameter hinzufügen, erhalten wir das Element und den Schlüssel. Wenn wir ein drittes Argument hinzufügen, können wir auch auf den Index der v-for-Schleife zugreifen.

Angenommen, wir möchten jedes Attribut in einem Produkt durchlaufen. Der Code lautet dann wie folgt:

<ul>
  <li v-for='(Produkte, Index) in Produkten' :key='Produkt._id' >
    <span v-for='(Artikel, Schlüssel, Index) im Produkt' :Schlüssel='Schlüssel'>
      {{ Artikel }}
    </span>
  </li>
</ul>

abschließend:
Hoffentlich hat Ihnen dieser Beitrag dabei geholfen, einige Best Practices für die Verwendung der Vue v-for-Direktive zu erlernen.

Damit ist dieser Artikel über 7 Möglichkeiten zum Schreiben von Vue v-for-Schleifen abgeschlossen. Weitere Informationen zu Vue v-for-Schleifen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!