Quelle est la différence entre v-if et v-for dans vue

La différence entre v-if et v-for : 1. Différentes fonctions. L'instruction v-if est utilisée pour restituer conditionnellement un élément de contenu. Cet élément de contenu ne sera rendu que lorsque l'expression de l'instruction renvoie un vrai. valeur ; while v La directive -for affiche une liste basée sur un tableau. 2. Les priorités sont différentes. v-for a une priorité plus élevée que v-if. Lors du jugement de if, v-for est jugé avant v-if.

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

Tout d'abord, il est clairement indiqué dans la documentation officielle qu'il n'est pas recommandé d'utiliser v-for et v-if ensemble.

1. Le rôle de v-if et v-for

L'instruction v-if est utilisée pour restituer conditionnellement un élément de contenu . Ce contenu ne sera rendu que lorsque l'expression de la commande renvoie une vraie valeur. 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.

Dans v-for, Il est recommandé de définir la valeur clé et de s'assurer que chaque valeur clé est unique, ce qui facilite l'optimisation de l'algorithme de comparaison.

La différence d'utilisation entre les deux est la suivante :

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

2 La priorité des deux

En utilisation, v-for a une priorité plus élevée que v-if

v-if. et v- for sont toutes des instructions dans le système de modèle vue

Lorsque le modèle vue est compilé, convertira le système d'instructions en une fonction de rendu exécutable

Exemple
Écrivez une balise p et utilisez v-if et v-for à en même temps

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

Créez une instance de vue et stockez les données isShow et items

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

Le code de l'instruction du modèle sera généré dans la fonction de rendu La fonction de rendu peut être obtenue via 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. est la fonction de rendu de liste de vue, à l'intérieur de la fonction Un jugement An if sera effectué
et une conclusion préliminaire est tirée : v-for a une priorité plus élevée que v-if

Ensuite, v-for et v-if sont placés dans des positions différentes labels

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

puis la fonction de rendu est générée

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

À ce moment-là, nous pouvons voir que lorsque v-for et v-if agissent sur des balises différentes, ils sont d'abord jugés puis rendus dans la liste

Vérifions la vue code source
Emplacement du code source : 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
  ...
}

In Lors d'un jugement if, v-for est jugé avant v-if. Le résultat du jugement final est que v-for a une priorité plus élevée que v-if. v-if et v-for sont utilisés sur le même élément en même temps, ce qui entraîne un gaspillage de performances (chaque rendu bouclera d'abord puis effectuera un jugement conditionnel)

Si vous évitez cette situation, imbriquez le modèle (page) dans la couche externe (le rendu ne génère pas de nœuds dom), le jugement v-si est effectué sur cette couche, puis la boucle v-for est effectuée en interne

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

Si la condition apparaît à l'intérieur de la boucle, les éléments qui n'ont pas besoin d'être affiché peut être filtré à l'avance via l'attribut calculé

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

Description du cas :

Raison : v-for a une priorité plus élevée que v-if Il doit parcourir l'ensemble du tableau à chaque fois, provoquant des calculs inutiles et affectant. performances.

Par exemple, en utilisant v-for sur la page Parcourez 100 balises li, mais affichez uniquement le contenu de la balise li avec index=97 et masquez le reste.

Même si une seule donnée doit être utilisée dans 100 listes, elle parcourra l'ensemble du tableau.

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

Solution : Utiliser calculated

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

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

[Recommandations associées : Tutoriel vidéo vuejs,

Développement web front-end

]

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!