Vue の v-if と v-for の違いは何ですか

v-if と v-for の違い: 1. 異なる関数。v-if 命令は、コンテンツの一部を条件付きでレンダリングするために使用されます。このコンテンツは、命令は true 値を返します レンダリング; v-for ディレクティブは、配列に基づいてリストをレンダリングします。 2. 優先順位が異なる v-for の方が v-if よりも優先され、if 判定の場合は v-if よりも先に v-for が判定されます。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

まず、公式ドキュメントには v-for と v-if の併用は推奨されないことが明記されています。

1. v-if と v-for の役割

v-if ディレクティブ

は、コンテンツの一部を条件付きでレンダリングするために使用されます 。このコンテンツは、ディレクティブ の式が true 値を返した場合にのみ 表示されます。

v-for ディレクティブは、

配列に基づいてリスト をレンダリングします。 v-for ディレクティブには、item in items という形式の特別な構文が必要です。ここで、items はソース データ配列またはオブジェクトであり、item は反復される配列要素のエイリアスです。

v-for では、

キー値 を設定し、各キー値が一意であることを確認することをお勧めします。これにより、 diff アルゴリズムの最適化が容易になります 。

この 2 つの使用法の違いは次のとおりです:

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

2. 2 つの優先順位

使用中、v-for は v-if よりも優先されます

v-if と v-for はどちらも vue テンプレート システムの命令です

vue テンプレートの場合がコンパイルされると、

コマンド システムが実行可能なレンダリング関数に変換されます

例

p タグを記述し、v-if および v-for

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

を使用してvue インスタンスでは、isShow と項目 data

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

template 命令を格納するためのコードが render 関数で生成され、レンダリング関数は 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 を通じて取得できます。は vue 関数のリストレンダリングで、関数内で if 判定が行われます

最初の結論は v-for の方が v-if よりも優先度が高いということです

次に v-for と v-ifは異なるラベルに配置されます

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

次に、レンダリング関数を出力します

ƒ 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 が異なるタグに作用する場合、最初に判定され、次に判定されることがわかります。リストが表示されます

もう一度vueのソースコードを確認してみましょう

ソースコードの場所:\vue-dev\src\compiler\codegen\index.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
  ...
}

if判定をする際に、 v-for は v-If よりも優れています。

最終的な判定結果は、v-for が v-if よりも優先されるということです。

##3 . 注意事項同じ要素に対して v-if と v-for を同時に使用しないでください。パフォーマンスの無駄が発生します (各レンダリングが最初にループし、次に条件判定が行われます)

これを回避する場合 この場合、テンプレートは外層にネストされており(ページレンダリングではdomノードは生成されません)、この層でv-if判定が行われ、内部でv-forループが行われます

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

条件がループ内に表示される場合は、計算された属性を通じて事前に表示する必要のない項目を除外できます。

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

ケースの説明:

理由: v-for は v-if よりも優先されます。毎回配列全体を走査する必要があるため、不要な計算が発生し、パフォーマンスに影響します。

たとえば、v-for を使用してループします。ページ上に 100 個の li タグがありますが、index=97 の li タグのコンテンツのみが表示され、残りはすべて非表示になります。

100 個のリストで 1 つのデータのみを使用する必要がある場合でも、配列全体をループします。

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

解決策: computed を使用します

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

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

[関連する推奨事項:

vuejs ビデオ チュートリアル

、Web フロントエンド開発]

以上がVue の v-if と v-for の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。