Lequel a la priorité la plus élevée, v-if ou v-for en vue ?

Dans vue2, v-for a une priorité plus élevée que v-if ; dans vue3, v-if a une priorité plus élevée que v-for. Dans Vue, n'utilisez jamais v-if et v-for sur le même élément en même temps, ce qui entraînerait un gaspillage de performances (chaque rendu bouclera d'abord puis effectuera un jugement conditionnel si vous souhaitez éviter cette situation, Modèles) ; peut être imbriqué dans la couche externe (le rendu de la page ne génère pas de nœuds DOM), le jugement v-if est effectué sur cette couche, puis la boucle v-for est effectuée en interne.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

La directive v-if est utilisée pour restituer conditionnellement un élément de contenu. Les directives sont utilisées pour restituer conditionnellement un bloc de contenu. Ce contenu ne sera rendu que si l'expression de la directive renvoie vrai. La directive
v-for affiche une liste basée sur un tableau. La directive v-for nécessite une syntaxe spéciale de la forme item in items, où items est le tableau ou l'objet de données source, et item est l'alias de l'élément du tableau en cours d'itération. <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

Lorsque v-for, il est recommandé de définir la valeur key et de s'assurer que chaque valeur key est unique. Il s'agit de . L'algorithme diff est optimisé.

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

Priorité

En fait, les réponses dans vue2 et vue3 sont complètement opposées.

• Dans vue2, v-for a une priorité plus élevée que v-if

• Dans vue3, v-if a une priorité plus élevée que v-for
  🎜🎜🎜🎜🎜v-for et v-if dans vue2 🎜🎜🎜 v-if et v-for sont tous deux des instructions dans le système de modèles vue. 🎜🎜Lorsque le modèle vue est compilé, le système de commande sera converti en une fonction render exécutable. 🎜🎜Écrivez une balise p et utilisez à la fois v-if et v-for🎜

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

  🎜Créez une vue exemple, stocke les données isShow et items. 🎜rrreeerrreee🎜_l est la fonction de rendu de liste de vue, et un jugement if sera effectué à l'intérieur de la fonction.
  Conclusion préliminaire : v-for a une priorité plus élevée que v-if.
  Placez ensuite v-for et v-if dans différentes balises 🎜rrreee🎜 puis affichez la fonction render 🎜rrreee🎜this Nous pouvons voir que lorsque v-for et v-if sont utilisés sur des balises différentes, ils sont d'abord jugés puis la liste est rendue. 🎜rrreee🎜Lors du jugement if, v-for est jugé avant v-if. 🎜🎜En fin de compte, v-for a une priorité plus élevée que v-if. 🎜🎜🎜v-for et v-if dans vue3🎜🎜🎜Dans vue3, v-if a une priorité plus élevée que v-fo, donc lorsque v-if est exécuté, la variable qu'il appelle n'existe pas encore, ce qui entraînera Exception 🎜🎜🎜Explication : 🎜Il y a généralement deux situations qui nous amènent à faire cela : 🎜🎜1 Afin de filtrer les éléments de la liste, tels que : 🎜rrreee
  🎜Dans vue2, rassemblez-les et affichez le. rendu On peut voir à partir de la fonction que la boucle sera exécutée en premier et ensuite les conditions seront jugées. Même si nous ne restituons qu'une petite partie des éléments de la liste, nous devons parcourir la liste entière à chaque fois que nous restituons. render, ce qui sera du gaspillage🎜🎜Dans vue3, v-if La priorité est supérieure à v-fo, donc lorsque v-if est exécuté, la variable qu'il appelle n'existe pas encore, ce qui provoquera une exception🎜🎜🎜À ce moment-là fois, définissez un attribut calculé (tel que activeUsers), let Il renvoie simplement la liste filtrée (telle que users.filter(u=>u.isActive)). 🎜🎜2. Afin d'éviter de rendre la liste qui devrait être masquée🎜rrreee
  🎜De même, dans vue2, rassemblez-les. La fonction de rendu de sortie montre que la boucle sera exécutée en premier, puis la condition. sera jugé, même si nous ne restituons qu'un petit nombre d'éléments dans la liste, il faut parcourir toute la liste à chaque fois qu'elle est restituée, ce qui est assez inutile🎜🎜Dans vue3, bien qu'écrire de cette façon ne signalera pas d'erreur, le officiel ne recommande toujours pas de faire cela à l'extérieur. 🎜🎜🎜Pour le moment, déplacez v-if vers l'élément conteneur (tel que ul, ol). >) ou enveloppez-le avec une couche de modèle C'est tout. 🎜🎜🎜🎜Notes🎜🎜🎜🎜N'utilisez jamais v-if et v-for sur le même élément en même temps, ce qui entraînerait un gaspillage de performances (chaque rendu bouclera d'abord puis effectuera un jugement conditionnel)🎜🎜🎜🎜 Si vous souhaitez éviter cette situation, imbriquez le modèle dans la couche externe (le rendu de la page ne génère pas de nœuds dom), effectuez un jugement v-if sur cette couche, puis effectuez une boucle v-for en interne🎜🎜🎜rrreee🎜🎜🎜if la condition se produit À l'intérieur de la boucle, les éléments qui n'ont pas besoin d'être affichés peuvent être filtrés à l'avance via l'attribut calculé🎜

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!