Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

この記事では主に、v-if と v-for を一緒に使用することが推奨されない理由を紹介します。詳細は以下の通りです。

1. 機能

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

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

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

どちらも使用中

<モーダル v-if="isShow" />
 
<li v-for="item in items" :key="item.id">
  {{item.label}}
</li>

2. 優先順位

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

Vueテンプレートがコンパイルされると、命令システムは実行可能なレンダリング関数に変換されます。

例

pタグを書いてv-ifとv-forを同時に使う

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

isShowとitemsデータを保存するvueインスタンスを作成する

constアプリ = 新しいVue({
 el: "#app",
 データ（） {
  戻る {
   アイテム: [
    { タイトル: "foo" },
    { タイトル: "バズ" }]
  }
 },
 計算: {
  isShow() {
   this.items && this.items.length > 0 を返します
  }
 }
})

テンプレート命令のコードはレンダリング関数で生成され、レンダリング関数はapp.$options.renderを通じて取得できます。

ƒ 匿名() {
 （これ）{戻り 
  _c('div', { 属性: { "id": "app" } }, 
  _l((アイテム), 関数(アイテム) 
  { 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="アプリ">
  <テンプレートv-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </テンプレート>
</div>

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

ƒ 匿名() {
 (これ){戻り 
  _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

エクスポート関数genElement（el：ASTElement、状態：CodegenState）：文字列{
 el.parentの場合{
  el.pre = el.pre || el.parent.pre
 }
 el.staticRoot の場合、 el.staticProcessed の場合、
  genStatic(el, state) を返す
 } そうでない場合 (el.once && !el.onceProcessed) {
  genOnce(el, state) を返す
 } そうでない場合 (el.for && !el.forProcessed) {
  genFor(el, state) を返す
 } そうでない場合 (el.if && !el.ifProcessed) {
  genIf(el, state) を返す
 } そうでない場合 (el.tag === 'template' && !el.slotTarget && !state.pre) {
  genChildren(el, state) を返します || 'void 0'
 } そうでない場合 (el.tag === 'スロット') {
  genSlot(el, state) を返す
 } それ以外 {
  //コンポーネントまたは要素
  ...
}

if判断をする場合、v-forはv-ifの前に判断される。

最終結論: v-for は v-if よりも優先度が高い

3. 注意事項

同じ要素に v-if と v-for を同時に使用しないでください。パフォーマンスが低下します (各レンダリングは条件判断の前にループします)。

この状況を回避するには、テンプレートを外側のレイヤーにネストし（ページのレンダリングではDOMノードは生成されません）、このレイヤーでv-if判定を行い、内側でv-forループを実行します。

<テンプレートv-if="isShow">
  <p v-for="item in items">
</テンプレート>

条件がループ内に表示される場合は、計算プロパティを使用して、事前に表示する必要がない項目を除外できます。

計算: {
  アイテム: 関数() {
   this.list.filter(function (item) { を返します
    item.isShowを返す
   })
  }
}

参考文献

https://vue3js.cn/docs/zh\

Vue で v-if と v-for を一緒に使用することが推奨されない理由に関するこの記事はこれで終わりです。v-if と v-for を一緒に使用することが推奨されない理由に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: