Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering

Vorwort

Was ist bedingtes Rendern? Es wird viele solcher Anwendungsszenarien auf unseren Seiten geben. Wenn wir beispielsweise heute eine Veranstaltung starten, ist diese Veranstaltungsseite nur heute gültig. Um 24:00 Uhr abends oder um 0:01 Uhr morgen früh muss diese Seite abgeschaltet und das Bild ausgeblendet werden. Wenn wir einen Betriebs- und Wartungsbruder beauftragen, das HTML manuell zu ändern, wird er verrückt. Tatsächlich gibt es hier eine sehr einfache Möglichkeit, nämlich bedingtes Rendern. Das heißt, wir beurteilen den Zustand um 0 Uhr. Wenn der Zustand einen Zeitpunkt wie 24 Uhr oder 0 Uhr erreicht, wird er ausgeblendet. Dies ist ein bedingtes Rendern.

Was ist Listen-Rendering? Dies ist die häufigste. Wenn beispielsweise die Seite viele Elemente und Bilder enthält und eine Nachrichten-Website 20 Artikel gleichzeitig lädt, müssen die Leute auf der Nachrichten-Website nicht arbeiten, wenn Sie HTML von Hand schreiben, und können einfach jeden Tag HTML-Code eingeben. Hier wird eine Schleifenanweisung verwendet, die der For-Schleife in unserem C-Sprachcode ähnelt und es uns ermöglicht, die Elemente dieser Seite zu konstruieren und zu generieren. Dies ist Listen-Rendering. 1 v-if und v-show

1.1 Funktion

Beide dienen zur Steuerung der Anzeige und des Ausblendens von Elementen

1.2 So steuern Sie die Sichtbarkeit von Elementen

v-if steuert die Erstellung und Zerstörung von Elementen im virtuellen DOM-Baum. Das Antwortsystem von Vue aktualisiert den tatsächlichen DOM basierend auf dem virtuellen DOM-Baum und steuert dadurch indirekt die Sichtbarkeit von Elementen im tatsächlichen DOM.

v-show blendet das Element aus, indem es dem Element den Stil display:none hinzufügt

1.3 Erster Rendering-Vergleich

v-if ist faul. Wenn die anfängliche Rendering-Bedingung falsch ist, wird nichts getan. Erst wenn die Bedingung erfüllt ist, beginnt die Kompilierung.

v-show Unabhängig von den anfänglichen Renderbedingungen wird das Element immer kompiliert und beibehalten und dann basierend auf den Bedingungen per CSS umgeschaltet

1.4 Vergleich des Schaltverbrauchs

Wenn Sie häufig zwischen Anzeigen und Ausblenden wechseln, erstellt und zerstört v-if häufig Elemente, während v-show nur die Stile wechselt.

Daher sind die Schaltkosten von v-if höher

1.5 Vergleich der Nutzungsszenarien

Wenn die Anzeige und das Ausblenden eines Elements zu Beginn festgelegt ist und sich nicht ändern wird, verwenden Sie v-if

Wenn das Element häufig umgeschaltet werden muss, verwenden Sie v-show

1.6 Sonstiges

• v-if kann mit Vorlage verwendet werden, v-show jedoch nicht
• v-if kann mit v-else verwendet werden, v-show hat keine spezielle Syntax
  

2 v-wenn und v-für

2.1 Warum v-if und v-for nicht gleichzeitig verwendet werden können

Warum kann ich v-if und v-for nicht gleichzeitig auf dasselbe Element anwenden?

Wenn Vue Anweisungen verarbeitet, hat v-for eine höhere Priorität als v-if, daher diese Vorlage:

<ul>
  <li v-for="Artikel in Liste" v-if="Artikel.istAktiv" :key="Artikel.id">
    {{item.name}}
  </li>
</ul>

Die folgenden Operationen werden durchgeführt:

diese.Liste.Map(Funktion(Element) {
  wenn (Artikel.istAktiv) {
    Artikelname zurückgeben
  }
})

Wir müssen bei jedem erneuten Rendern die gesamte Liste durchlaufen, selbst wenn es nur wenige Elemente gibt, bei denen „isActive“ auf „true“ gesetzt ist. Dies führt zu einer enormen Leistungsverschwendung. Daher können beide Elemente nicht gleichzeitig auf demselben Element verwendet werden.

2.2 Lösung für die gemeinsame Verwendung von v-if und v-for

1. Wenn Sie die Sichtbarkeit der gesamten Liste steuern möchten, können Sie v-if zum Containerelement verschieben, zum Beispiel:

<Text>
  <div id="Beispiel">
    <ul v-if="ListeAnzeigen">
      <li v-for="Artikel in aktiven Artikeln" :key="Artikel.id">{{Artikel.name}}</li>
    </ul>
  </div>
</body>
<Skript>
  const vm = neuer Vue({
    el: "#Beispiel",
    Daten: {
      Liste: [
        { id: 1, name: "Ruffy", ist aktiv: true },
        { id: 2, name: "Sauron", isActive: false },
        { ID: 3, Name: "Sanji", ist aktiv: true },
      ],
      listShow: false,
    }
  });
</Skript>

2. Wenn Sie die Elemente in der Liste filtern möchten, können Sie berechnete Eigenschaften verwenden, um die gefilterte Liste zurückzugeben, zum Beispiel:

<Text>
  <div id="Beispiel">
    <ul>
      <li v-for="Artikel in aktiven Artikeln" :key="Artikel.id">{{Artikel.name}}</li>
    </ul>
  </div>
</body>
<Skript>
  const vm = neuer Vue({
    el: "#Beispiel",
    Daten: {
      Liste: [
        { id: 1, name: "Ruffy", ist aktiv: true },
        { id: 2, name: "Sauron", isActive: false },
        { ID: 3, Name: "Sanji", ist aktiv: true },
      ],
    },
    berechnet: {
      aktiveElemente: Funktion () {
        gibt diesen.Listenfilter zurück ((Element) => Element.istaktiv);
      },
    },
  });
</Skript>

3 Wozu dient der Listen-Rendering-Schlüssel?

Wenn Sie v-for für die Listendarstellung verwenden, müssen Sie dem Element ein Schlüsselattribut hinzufügen, und dieser Schlüssel muss ein eindeutiger Bezeichner sein

<ul>
 <li v-for="Artikel in Liste" :key="item.id">{{item.name}}</li>
</ul>

Wir wissen, dass Vue beim Aktualisieren eines Elements nicht direkt den realen DOM bedient (das Rendern des realen DOM ist sehr aufwändig), sondern basierend auf den neuen Daten einen neuen virtuellen DOM generiert, dann den neuen und den alten virtuellen DOM vergleicht und basierend auf den Vergleichsergebnissen DOM-Operationen ausführt, um die Ansicht zu aktualisieren.

Wenn beim Rendern einer Liste ein Schlüsselattribut vorhanden ist, muss kein eingehender Vergleich durchgeführt werden, da es sich um eine eindeutige Kennung handelt, wenn zwei neue und alte Knoten verglichen werden und die Schlüssel unterschiedlich sind.

Warum können wir den Index nicht als Schlüssel verwenden? Da der Index instabil und veränderlich ist, führt beispielsweise das Löschen des ersten Elements der Liste dazu, dass sich der Index der nachfolgenden Elemente ändert, was wiederum eine Änderung des Schlüssels zur Folge hat. Wenn Vue zu diesem Zeitpunkt die neuen und alten Knoten vergleicht und auf einen Knoten mit demselben Schlüssel stößt, führt es einen eingehenden Vergleich durch. Wenn festgestellt wird, dass sich der Knoteninhalt geändert hat, wird ein neuer realer DOM erstellt, der den ursprünglichen realen DOM ersetzt. Der Vorgang, bei dem ursprünglich nur das erste Element im realen DOM gelöscht werden musste, umfasst nun das Erstellen und Ersetzen aller nachfolgenden realen DOMs, was zu einer enormen Leistungsverschwendung führt.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Vue-Grundlagen-Tutorial – bedingtes Rendering und Listen-Rendering. Weitere verwandte Inhalte zu bedingtem Rendering und Listen-Rendering in Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!