ぶっちゃけ
keyを指定せずにv-for を使おうとするとエラーになるので、あまり深く理解せずおまじないだと思っていても問題ありません。
結論
効率的に描画(レンダリング)をするため。
詳細
配列にはインデックスという「どの要素が配列の何番目にあるのかを表すための数字」があるので、このインデックスがあれば:key
を指定する必要が無いのでは?と思うかもしれません。
しかし実際はこのインデックスだけだと、描画するときにかなり非効率になってしまいます。
v-for
は配列の内容を動的に描画するための仕組みなので、配列を並べ替えたり、値を変えたりしてもちゃんと描画をしてくれます。インデックスだけの場合、配列の変更が一部であっても、配列の全要素を再描画することになるためかなり非効率な処理となってしまいます。
そのためインデックスとは別に、:key
に各要素を一意に表す数字を指定することで、配列の一部変更があったら、その箇所だけを再描画してくれる様になります。
余談ですが、:key
は全てのコンポーネントで最初から定義されているため自分で定義する必要はありません。
例
<ul>
<li v-for="item in items" :key="item.id">
{{ item.message }}
</li>
</ul>