Welches hat die höhere Priorität, v-if oder v-for in vue?

In vue2 hat v-for eine höhere Priorität als v-if; in vue3 hat v-if eine höhere Priorität als v-for. Verwenden Sie in Vue niemals gleichzeitig v-if und v-for für dasselbe Element, da dies zu einer Leistungsverschwendung führt (bei jedem Rendering wird zuerst eine Schleife ausgeführt und dann eine bedingte Beurteilung durchgeführt). Wenn Sie diese Situation vermeiden möchten, verwenden Sie Vorlagen kann in der äußeren Ebene verschachtelt werden (Seitenrendering generiert keine DOM-Knoten), die v-if-Beurteilung wird auf dieser Ebene durchgeführt und dann wird die v-for-Schleife intern ausgeführt.

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

v-if-Direktive wird zum bedingten Rendern eines Inhalts verwendet. Direktiven werden zum bedingten Rendern eines Inhaltsblocks verwendet. Dieser Inhalt wird nur gerendert, wenn der Ausdruck der Direktive „true“ 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 ist und item ist der Alias ​​des Array-Elements, das iteriert wird. <code>v-if指令用于条件性地渲染一块内容。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名。

在v-for的时候，建议设置key值，并且保证每一个key值都是独一无二的，这便是diff算法进行优化。

<modal></modal>

    {{ item.label }}

优先级

其实在vue2和vue3中的答案是截然相反的。

• 在vue2中，v-for的优先级高于v-if

• 在vue3中，v-if的优先级高于v-for

vue2中的v-for和v-if

v-if和v-for都是vue模板系统中的指令。

在vue模板编译的时候，会将指令系统转化为可执行的render函数。

编写一个p标签，同时使用v-if和v-for

<div>
    <p>
        {{ item.title }}
    </p>
</div>

创建vue示例，存放isShow和items数据。

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

ƒ 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是vue的列表渲染函数，函数内部都会进行一次if判断。
初步得到结论：v-for优先级是比v-if高。
再将v-for与v-if置于不同标签

<div>
    <template>
        <p>{{item.title}}</p>
    </template>
</div>

再输出下render函数

ƒ 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)}
}

这时候我们可以看到，v-for与v-if作用在不同标签时候，是先进行判断，再进行列表的渲染。

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
    ...
}

在进行if判断的时候，v-for是比v-if先进行判断。

最终v-for优先级比v-if高。

vue3中的v-for和v-if

在vue3中，v-if的优先级高于v-fo，所以v-if执行时，它调用的变量还不存在，就会导致异常

说明：通常有两种情况下导致我们这样做：

1.为了过滤列表中的项目，比如：

v-for="user in users" v-if="user.isActive"

• 在vue2中，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费
• 在vue3中，v-if的优先级高于v-fo，所以v-if执行时，它调用的变量还不存在，就会导致异常

此时定义一个计算属性（比如 activeUsers），让其返回过滤后的列表即可（比如users.filter(u=>u.isActive)）。

2.为了避免渲染本应该被隐藏的列表

v-for="user in users" v-if="shouldShowUsers"

• 同样，在vue2中，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费
• 在vue3中，这样写虽然并不会报错，但是官方还是及其不推荐外面这样去做

此时把v-if移动至容器元素上（比如ul、ol）或者外面包一层template

Bei v-for wird empfohlen, den key-Wert festzulegen und sicherzustellen, dass jeder key-Wert eindeutig ist. Dies ist diff-Algorithmus ist optimiert.

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

Priorität

Tatsächlich sind die Antworten in vue2 und vue3 völlig gegensätzlich.

• In vue2 hat v-for eine höhere Priorität als v-if

• In vue3 hat v-if eine höhere Priorität als v-for
  🎜🎜🎜🎜🎜v-for und v-if in vue2 🎜🎜🎜 v-if und v-for sind beide Anweisungen im vue-Vorlagensystem. 🎜🎜Wenn die vue-Vorlage kompiliert wird, wird das Befehlssystem in eine ausführbare render-Funktion umgewandelt. 🎜🎜Schreiben Sie ein p-Tag und verwenden Sie sowohl v-if als auch v-for. 🎜

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

  🎜Erstellen Sie ein vue Beispielsweise werden isShow- und items-Daten gespeichert. 🎜rrreeerrreee🎜_l ist die Listenwiedergabefunktion von vue, und innerhalb der Funktion wird eine if-Beurteilung durchgeführt.
  Vorläufige Schlussfolgerung: v-for hat eine höhere Priorität als v-if.
  Platzieren Sie dann v-for und v-if in verschiedenen Tags 🎜rrreee🎜 und geben Sie dann die render-Funktion 🎜rrreee🎜this aus Wir können sehen, dass, wenn v-for und v-if für verschiedene Tags verwendet werden, diese zuerst beurteilt werden und dann die Liste gerendert wird. 🎜rrreee🎜Bei der if-Beurteilung wird v-for vor v-if beurteilt. 🎜🎜Letztendlich hat v-for eine höhere Priorität als v-if. 🎜🎜🎜v-for und v-if in vue3🎜🎜🎜In vue3 hat v-if eine höhere Priorität als v-fo. Wenn also v-if ausgeführt wird, existiert die aufgerufene Variable noch nicht, was dazu führt Ausnahme 🎜🎜🎜Erklärung: 🎜Es gibt normalerweise zwei Situationen, die uns dazu veranlassen: 🎜🎜1. Um Elemente in der Liste zu filtern, wie zum Beispiel: 🎜rrreee
  🎜Fügen Sie sie in vue2 zusammen und geben Sie sie aus Rendering Aus der Funktion geht hervor, dass zuerst die Schleife ausgeführt wird und dann die Bedingungen beurteilt werden. Selbst wenn wir nur einen kleinen Teil der Elemente in der Liste rendern, müssen wir jedes Mal die gesamte Liste durchlaufen. rendern, was verschwenderisch sein wird🎜🎜In vue3 hat v-if eine höhere Priorität als v-fo. Wenn also v-if ausgeführt wird, existiert die aufgerufene Variable noch nicht, was zu einer Ausnahme führt🎜🎜🎜An diesem Punkt Definieren Sie zu diesem Zeitpunkt ein berechnetes Attribut (z. B. activeUsers) und geben Sie einfach die gefilterte Liste zurück (z. B. users.filter(u=>u.isActive)). 🎜🎜2. Um zu vermeiden, dass die Liste ausgeblendet wird🎜rrreee
  🎜Fügen Sie sie in ähnlicher Weise zusammen. Aus der Ausgabe-Rendering-Funktion ist ersichtlich, dass zuerst die Schleife und dann die Bedingung ausgeführt werden wird beurteilt, selbst wenn wir nur eine kleine Anzahl von Elementen in der Liste rendern, muss bei jedem erneuten Rendern die gesamte Liste durchlaufen werden, was ziemlich verschwenderisch ist🎜🎜In vue3 wird zwar kein Fehler gemeldet, wenn man auf diese Weise schreibt Der Beamte empfiehlt immer noch nicht, dies außerhalb zu tun. 🎜🎜🎜Verschieben Sie zu diesem Zeitpunkt v-if in das Containerelement (z. B. ul, ol). >) oder umhüllen Sie es mit einer Schicht template Das ist es. 🎜🎜🎜🎜Hinweise🎜🎜🎜🎜Verwenden Sie v-if und v-for niemals gleichzeitig für dasselbe Element, da dies 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 möchten, verschachteln Sie die Vorlage in der äußeren Ebene (Seitenrendering generiert keine Dom-Knoten), führen Sie eine V-IF-Beurteilung auf dieser Ebene durch und führen Sie dann intern eine V-For-Schleife aus Die Bedingung tritt ein. Innerhalb der Schleife können Elemente, die nicht angezeigt werden müssen, vorab durch das berechnete Attribut herausgefiltert werden🎜

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

【相关视频教程推荐：vuejs入门教程、web前端入门】

Das obige ist der detaillierte Inhalt vonWelches hat die höhere Priorität, v-if oder v-for in vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!