Nuxt.js で v-for について理解を深める

はじめに

webアプリを開発中に v-for についていまいち理解し切れていないと感じたので、じっくりと考えてみる。

なお、今回はCLI ではなく CDN にて動作確認をするので、すべてのソースに https://unpkg.com/vue@next を読み込んでいる。

まずは v-for ってなに

公式には下記のように書かれている。

v-for ディレクティブを使えばアイテムのリストを配列内のデータを使って表示することができます

で例として挙げられてるのが、下記のようなソース。

See the Pen v-for_Base by PROGBLOG (@progblog-sank) on CodePen.

確かに配列を使用してデータを呼び出してくれている。

ただこれだけ見ると、別にHTML にひとつひとつ書いていくのと決して変わらない。

むしろ面倒くさいと思うまである。

じゃあなぜ v-for を使用するのか

配列が動的に変化する場合は、非常に有効に作用する。

See the Pen JjRQyJw by PROGBLOG (@progblog-sank) on CodePen.

例えばこんな感じで、リストの増減する要素を簡単に作成することができる。

key属性 について

繰り返される DOM の内容が単純な場合や、性能向上のためにデフォルトの動作に意図的に頼る場合を除いて、可能なときはいつでも v-for にkey 属性を与えることが推奨されます。

上記にあるように、v-for ではkey 属性を与えなければならない。

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

vue のドキュメントにあるサンプルソースは上記の通り。

正直ここは理解しきれていないので、他サイトのまとめを拝借する。

• key はVue の処理を手助けする
  
• key がない場合、同じ要素を再利用される
  
• key がある場合、key に基づいて変更される
  
• 同じ要素を親に持つ場合key は一意なものにする
  
• v-for のインデックスをkeyに用いない
  
• key を正しく用いて効率よく扱っていきましょう。

tanks🥰: Vue.jsのkeyとは？-Vue.js