Was ist der Unterschied zwischen v-if und v-for in vue

Der Unterschied zwischen v-if und v-for: 1. Verschiedene Funktionen Die v-if-Anweisung wird zum bedingten Rendern eines Inhalts verwendet. Dieser Inhalt wird nur dann gerendert, wenn der Ausdruck der Anweisung „true“ zurückgibt value; while v Die -for-Direktive rendert eine Liste basierend auf einem Array. 2. Die Prioritäten sind unterschiedlich. V-for hat eine höhere Priorität als v-if. Bei der Beurteilung wird v-for vor v-if beurteilt.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Zuallererst wird in der offiziellen Dokumentation klar angegeben, dass die gemeinsame Verwendung von v-for und v-if nicht empfohlen wird.

1. Die Rolle von v-if und v-for

Die v-if-Anweisung wird zum bedingten Rendern eines Inhalts verwendet. Dieser Inhalt wird nur gerendert , wenn der Ausdruck des Befehls einen wahren Wert zurückgibt. Die

v-for-Direktive rendert eine Liste basierend auf einem Array. Die v-for-Direktive erfordert eine spezielle Syntax der Form item in items, wobei „items“ das Quelldatenarray oder -objekt und „item“ der Alias ​​des zu iterierenden Array-Elements ist.

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

Der Unterschied in der Verwendung zwischen den beiden ist wie folgt:

<div v-if="isShow" >123</div>
  
<li v-for="item in items" :key="item.id">
  {{ item.label }}
</li>

2 Die Priorität der beiden

Bei der Verwendung hat v-for eine höhere Priorität als v-if

v-if und v-for sind alle Anweisungen im Vue-Vorlagensystem

Wenn die Vue-Vorlage kompiliert ist, wird das Anweisungssystem in eine ausführbare Renderfunktion umgewandelt

Beispiel
Schreiben Sie ein p-Tag und verwenden Sie v-if und v-for at Gleichzeitig

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

Erstellen Sie eine Vue-Instanz und speichern Sie isShow- und Elementdaten

const app = new Vue({
 el: "#app",
 data() {
  return {
   items: [
    { title: "foo" },
    { title: "baz" }]
  }
 },
 computed: {
  isShow() {
   return this.items && this.items.length > 0
  }
 }
})

Der Code der Vorlagenanweisung wird in der Renderfunktion generiert. Die Rendering-Funktion kann über app.$options.render

ƒ anonymous() {
 with (this) { return
  _c('div', { attrs: { "id": "app" } }, 
  _l((items), function (item) { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

_l abgerufen werden ist die Listenwiedergabefunktion von vue. Innerhalb der Funktion wird eine if-Beurteilung durchgeführt
und eine vorläufige Schlussfolgerung gezogen: v-for hat eine höhere Priorität als v-if

Dann werden v-for und v-if unterschiedlich platziert Etiketten

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

Dann geben Sie die Renderfunktion aus

ƒ anonymous() {
 with(this){return
  _c('div',{attrs:{"id":"app"}},
  [(isShow)?[_v("\n"),
  _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}
}

Zu diesem Zeitpunkt können wir sehen, dass v-for und v-if, wenn sie auf verschiedene Tags wirken, zuerst beurteilt und dann in der Liste gerendert werden

Lassen Sie uns den Vue-Quellcode überprüfen
Quellcode-Speicherort: vue-devsrccompilercodegenindex.js

export function genElement (el: ASTElement, state: CodegenState): string {
 if (el.parent) {
  el.pre = el.pre || el.parent.pre
 }
 if (el.staticRoot && !el.staticProcessed) {
  return genStatic(el, state)
 } else if (el.once && !el.onceProcessed) {
  return genOnce(el, state)
 } else if (el.for && !el.forProcessed) {
  return genFor(el, state)
 } else if (el.if && !el.ifProcessed) {
  return genIf(el, state)
 } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
  return genChildren(el, state) || 'void 0'
 } else if (el.tag === 'slot') {
  return genSlot(el, state)
 } else {
  // component or element
  ...
}

Bei der Beurteilung von „if“ wird „v-for“ vor „v-if“ beurteilt. Das endgültige Ergebnis der Beurteilung ist, dass „v-for“ eine höhere Priorität hat als „v-if“. if und v-for werden gleichzeitig für dasselbe Element verwendet, was zu einer Leistungsverschwendung führt (jedes Rendering führt zuerst eine Schleife durch und führt dann eine bedingte Beurteilung durch).

Wenn Sie diese Situation vermeiden, verschachteln Sie die Vorlage (Seite) in Beim Rendern der äußeren Ebene werden keine Dom-Knoten generiert. Die v-if-Beurteilung wird auf dieser Ebene durchgeführt, und dann wird die v-for-Schleife intern ausgeführt

<template v-if="isShow">
  <p v-for="item in items">
</template>

Wenn die Bedingung innerhalb der Schleife erscheint, können die Elemente, die nicht angezeigt werden müssen, angezeigt werden durch das berechnete Attribut im Voraus herausgefiltert werden.

computed: {
  items: function() {
   return this.list.filter(function (item) {
    return item.isShow
   })
  }
}

Nach dem Login kopieren

. Fallbeschreibung: Verwenden Sie beispielsweise v-for auf der Seite. Durchlaufen Sie 100 Li-Tags, zeigen Sie jedoch nur den Inhalt des Li-Tags mit Index = 97 an und blenden Sie den Rest aus. Selbst wenn in 100 Listen nur ein Datenelement verwendet werden muss, wird das gesamte Array durchlaufen.

 <ul>
    <li v-for="item in list" v-if="item.actived">{{item.name}}</li>
 </ul>

Nach dem Login kopieren

<ul>
    <li v-for="item in activeList">{{item.name}}</li>
</ul>

computed: {
  activeList() {
    return this.list.filter(val => {
      return val.actived;
    });
  }
},

vuejs-Video-Tutorial

Web-Front-End-Entwicklung

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen v-if und v-for in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!