Vue v-for ループを書く 7 つの方法

これは、次のような状況で特に役立ちます。

• 配列またはリストのレンダリング
• オブジェクトのプロパティを反復処理する
  

Vue における v-for ループの最も基本的な使用法は次のとおりです。

<ul>
  <li v-for='製品内の製品'>
    {{製品名}}
  </li>
</ul>

ただし、この記事では、 v-forコードをより正確、予測可能、効率的にする優れた方法をいくつか紹介します。

始めましょう。

1. v-forループでは常にキーを使用する

まず、ほとんどのVue開発者がすでに知っている一般的なベストプラクティス、つまり v-for ループで :key を使用する方法について説明します。一意のキー プロパティを設定することで、コンポーネントが期待どおりに動作することを保証できます。

:keyを使用しない場合、Vue は DOM を可能な限り効率的にします。これにより、 v-for要素が順序どおりに表示されなかったり、予期しない動作をしたりする可能性があります。

各要素に一意のキー参照があれば、より予測可能な方法で DOM を操作できます。

<ul>
  <li 
    v-for='products 内の product'
    :key='製品._id'  
  >
    {{製品名}}
  </li>
</ul>

2. 特定のスコープ内でv-forループを使用する

ほとんどの場合、 v-for配列またはオブジェクトをループするために使用されますが、特定の回数だけ反復処理したい場合もあります。

たとえば、オンライン ストアのページネーション システムを作成し、1 ページあたり 10 個の製品のみを表示したいとします。変数を使用して現在のページ番号を追跡することで、次のようにページングを処理できます。

<ul>
  <li v-for='インデックス 10' :key='インデックス'>
    {{ 製品[ページ * 10 + インデックス] }}
  </li>
</ul>

3. ループ内でのv-ifの使用を避ける

非常によくある間違いはv-forループ内でデータをフィルタリングするために v-if を使用することです。

これは直感的に思えるかもしれませんが、大きなパフォーマンスの問題につながる可能性があります。VueJS VueJS v-if ディレクティブよりも v-for ディレクティブを優先します。

つまり、コンポーネントは各要素を反復処理してから、 v-if条件をチェックしてレンダリングする必要があるかどうかを確認します。

v-if を v-for と一緒に使用すると、条件に関係なく、配列内のすべての項目が反復処理されます。

// 悪い習慣です!
<ul>
  <li 
    v-for='products 内の product' 
    :key='製品._id' 
    v-if='product.onSale'
  >
    {{製品名}}
  </li>
</ul>

それで、問題は何でしょうか?

products配列に何千ものアイテムがあるが、現在販売中の 3 つの製品のみをレンダリングするとします。

再レンダリングのたびに、販売されている 3 つの製品はまったく変更されていないにもかかわらず、Vue は数千のアイテムを反復処理する必要があります。

v-if とv-for一緒に使用することは避ける必要があります。

次に、2 つの代替アプローチについて説明します。

4. 計算プロパティまたはメソッドを使用する

上記の問題を回避するには、テンプレートでデータを反復処理する前にデータをフィルタリングする必要があります。これを行うには非常によく似た 2 つの方法があります。

• computedプロパティの使用
• フィルター方式を使用する
  

どちらを選択するかはあなた次第ですが、両方の方法について簡単に説明しましょう。

まず、 computedプロパティを設定する必要があります。前の v-if と同じ機能を実現するには、コードは次のようになります。

<テンプレート>
  <ul>
    <li v-for="productsOnSale 内の製品" :key="product._id">
      {{製品名}}
    </li>
  </ul>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    データ （） {
      戻る {
        製品： []
      }
    },
    計算: {
      製品販売: 関数 () {
        this.products.filter(product => product.onSale) を返します
      }
    }
  }
</スクリプト>

利点は次のとおりです。

• データプロパティは依存関係が変更された場合にのみ再評価されます
• テンプレートはセール中の商品のみを反復処理し、すべての商品を反復処理するわけではありません。
  

フィルター メソッドを使用するコードはほぼ同じですが、フィルター メソッドを使用すると、テンプレート内の値にアクセスする方法が変わります。ただし、フィルタリング プロセスに変数を渡せるようにしたい場合は、メソッド ルートを選択する必要があります。

<テンプレート>
  <ul>
    <li v-for="productsOnSale(50)) 内の製品" :key="product._id">
      {{製品名}}
    </li>
  </ul>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
   データ （） {
    戻る {
     製品： []
    }
   },
   メソッド: {
    販売中の製品 (最大価格) {
     this.products.filter(product => product.onSale && product.price < maxPrice) を返します
    }
   }
  }
</スクリプト>

5. ループの周りに要素のレイヤーをラップする

リストをレンダリングするかどうかを決定するときにv-forとv-ifを組み合わせることもできます。

たとえば、ユーザーがログインしているときにのみ製品リストをレンダリングしたい場合はどうすればよいでしょうか。

エラーコード:

<ul>
  <li 
    v-for='products 内の product' 
    :key='製品._id' 
    v-if='isLoggedIn' <!-- ここ -->
  >
    {{製品名}}
  </li>
</ul>

これの何が問題なのですか?

以前と同じです。 Vueテンプレートはv-for考慮するため、各要素をループしてv-ifをチェックします。

最終的に何もレンダリングされない場合でも、何千もの要素をループします。

この例では、簡単な解決策は v-if ステートメントを移動することです。

より良いコード!

<ul v-if='isLoggedIn'> <!-- ずっと良くなりました -->
  <li 
    v-for='products 内の product' 
    :key='製品._id' 
  >
    {{製品名}}
  </li>
</ul>

これははるかに優れています。isLoggedIn isLoggedIn falseの場合、反復はまったく必要ないからです。

6. ループ内でのインデックスへのアクセス

配列を反復処理して各要素にアクセスする代わりに、各項目のインデックスを追跡することもできます。

これを行うには、アイテムの後にインデックス値を追加する必要があります。これは非常にシンプルですが、ページング、リスト インデックスの表示、ランキングの表示などに役立ちます。

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    製品番号 {{ index }}: {{ product.name }}
  </li>
</ul>

7. 反復オブジェクト

これまでは、配列を反復処理するためにv-forを使用する方法についてのみ説明しました。しかし、オブジェクトのキーと値のペアを反復処理する方法も簡単に学ぶことができます。

要素のインデックスにアクセスする場合と同様に、ループに別の値を追加する必要があります。単一の引数を持つオブジェクトをループすると、すべての項目がループされます。

別のパラメータを追加すると、アイテムとキーが取得されます。 3 番目の引数を追加すると、v-for ループのインデックスにもアクセスできるようになります。

製品内のすべての属性を反復処理するとします。コードは次のようになります。

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    <span v-for='(item, key, index) in product' :key='key'>
      {{ アイテム }}
    </span>
  </li>
</ul>

結論は：
この投稿が、Vue の v-for ディレクティブを使用するためのベストプラクティスを学ぶのに役立つことを願っています。

これで、Vue v-for ループを書く 7 つの方法についての記事は終了です。Vue v-for ループの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。