Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird

In diesem Artikel wird hauptsächlich erläutert, warum die gemeinsame Verwendung von v-if und v-for nicht empfohlen wird. Teilen Sie es uns mit, die Einzelheiten lauten wie folgt:

1. Funktion

Die v-if-Direktive wird verwendet, um einen Inhaltsteil bedingt darzustellen. Dieser Inhalt wird nur gerendert, wenn der Ausdruck der Direktive einen wahren Wert zurückgibt.

Die v-for-Direktive rendert eine Liste basierend auf einem Array. Die Direktive v-for erfordert eine spezielle Syntax in der Form „Element in Elementen“, wobei „Elemente“ das Quelldaten-Array oder -Objekt und „Element“ ein Alias ​​für das iterierte Array-Element ist.

Bei der Verwendung von v-for wird empfohlen, den Schlüsselwert festzulegen und sicherzustellen, dass jeder Schlüsselwert eindeutig ist, was die Optimierung des Diff-Algorithmus erleichtert.

Sowohl im Gebrauch

<Modal v-if="istAnzeigen" />
 
<li v-for="Artikel in Artikeln" :key="artikel.id">
  {{ Artikel.label }}
</li>

2. Priorität

v-if und v-for sind beide Anweisungen im Vue-Vorlagensystem.

Beim Kompilieren der Vue-Vorlage wird das Anweisungssystem in eine ausführbare Renderfunktion umgewandelt

Beispiel

Schreiben Sie ein p-Tag und verwenden Sie gleichzeitig v-if und v-for

<div id="app">
  <p v-if="isShow" v-for="Artikel in Artikeln">
    {{ item.title }}
  </p>
</div>

Erstellen Sie eine Vue-Instanz zum Speichern von isShow- und Item-Daten

const app = new Vue({
 el: "#app",
 Daten() {
  zurückkehren {
   Artikel: [
    { Titel: "foo" },
    { Titel: "baz" }]
  }
 },
 berechnet: {
  istAnzeigen() {
   gib diese.Elemente und diese.Elementlänge > 0 zurück
  }
 }
})

Der Code der Vorlagenanweisungen wird in der Renderfunktion generiert und die Renderingfunktion kann über app.$options.render abgerufen werden.

ƒ anonym() {
 mit (diesem) { return 
  _c('div', { attrs: { "id": "app" } }, 
  _l((Elemente), Funktion (Element) 
  _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_l ist die Listen-Rendering-Funktion von Vue. Innerhalb der Funktion wird eine if-Beurteilung durchgeführt.

Vorläufige Schlussfolgerung: v-for hat eine höhere Priorität als v-if

Setzen Sie dann v-for und v-if in unterschiedliche Tags

<div id="app">
  <Vorlage v-if="istAnzeigen">
    <p v-for="Artikel in Artikeln">{{Artikel.title}}</p>
  </Vorlage>
</div>

Geben Sie dann die Renderfunktion aus

ƒ anonym() {
 mit(diesem){return 
  _c('div',{attrs:{"id":"app"}},
  [(istAnzeigen)?[_v("\n"),
  _l((Artikel),Funktion(Artikel){return _c('p',[_v(_s(Artikel.Titel))])})]:_e()],2)}
}

An diesem Punkt können wir sehen, dass v-for und v-if, wenn sie auf unterschiedliche Tags einwirken, zuerst eine Beurteilung vornehmen und dann die Liste rendern.

Schauen wir uns den Vue-Quellcode noch einmal an

Speicherort des Quellcodes: \vue-dev\src\compiler\codegen\index.js

Exportfunktion genElement (el: ASTElement, Status: CodegenState): Zeichenfolge {
 wenn (el.parent) {
  el.pre = el.pre || el.übergeordnet.pre
 }
 wenn (el.staticRoot && !el.staticProcessed) {
  returniere genStatic(el, status).
 } sonst wenn (el.once && !el.onceProcessed) {
  returniere genOnce(el, Zustand)
 } sonst wenn (el.for && !el.forProcessed) {
  returniere genFor(el, state)
 } sonst wenn (el.if && !el.ifProcessed) {
  returniere genIf(el, state)
 } sonst wenn (el.tag === 'template' && !el.slotTarget && !state.pre) {
  returniere genChildren(el, state) || 'void 0'
 } sonst wenn (el.tag === 'Slot') {
  returniere genSlot(el, status).
 } anders {
  //Komponente oder Element
  ...
}

Bei einer if-Beurteilung wird v-for vor v-if beurteilt.

Endgültige Schlussfolgerung: v-for hat eine höhere Priorität als v-if

3. Hinweise

Verwenden Sie niemals v-if und v-for gleichzeitig für dasselbe Element, da dies zu Leistungseinbußen führt (jedes Rendering wird vor der bedingten Beurteilung wiederholt).

Um diese Situation zu vermeiden, verschachteln Sie die Vorlage in der äußeren Ebene (beim Rendern der Seite werden keine DOM-Knoten generiert), führen Sie in dieser Ebene eine v-if-Beurteilung durch und führen Sie dann im Inneren eine v-for-Schleife aus

<Vorlage v-if="istAnzeigen">
  <p v-for="Artikel in Artikeln">
</Vorlage>

Wenn die Bedingung innerhalb einer Schleife auftritt, können Sie die berechnete Eigenschaft verwenden, um Elemente herauszufiltern, die nicht im Voraus angezeigt werden müssen.

berechnet: {
  Elemente: Funktion() {
   returniere diese.Liste.Filter(Funktion (Element) {
    return item.isShow
   })
  }
}

Verweise

https://vue3js.cn/docs/zh\

Damit ist dieser Artikel darüber, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird, abgeschlossen. Weitere relevante Inhalte dazu, warum die gemeinsame Verwendung von v-if und v-for nicht empfohlen wird, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!