1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Vue.js】v-forで:keyの指定がなぜ必要なのか

Last updated at Posted at 2022-06-12

ぶっちゃけ

keyを指定せずにv-for を使おうとするとエラーになるので、あまり深く理解せずおまじないだと思っていても問題ありません。

結論

効率的に描画(レンダリング)をするため。

詳細

配列にはインデックスという「どの要素が配列の何番目にあるのかを表すための数字」があるので、このインデックスがあれば:keyを指定する必要が無いのでは?と思うかもしれません。
しかし実際はこのインデックスだけだと、描画するときにかなり非効率になってしまいます。

v-forは配列の内容を動的に描画するための仕組みなので、配列を並べ替えたり、値を変えたりしてもちゃんと描画をしてくれます。インデックスだけの場合、配列の変更が一部であっても、配列の全要素を再描画することになるためかなり非効率な処理となってしまいます。

そのためインデックスとは別に、:keyに各要素を一意に表す数字を指定することで、配列の一部変更があったら、その箇所だけを再描画してくれる様になります。
余談ですが、:keyは全てのコンポーネントで最初から定義されているため自分で定義する必要はありません。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?