この記事はvue.js入門者向けに書いています。
そもそも公式ガイドを見れば書いてあるんですが、公式ガイドすらよく分からない人向け、自分のメモとして書いておこうと思います。
自分が開発する上で詰まったことは誰かも同じように、つまづいていると言うことだと思い、初心者目線で記事を書いていこうと思います。
v-forのkeyとは
それではvueのガイドにどのように書いてあるかと言うと以下のように書いてありました。
Vue が各ノードの識別情報を追跡できるヒントを与えるために、また、先ほど説明したような既存の要素の再利用と並び替えができるように、一意な key 属性を全てのアイテムに与える必要があります。
厳密には間違っているかもしれませんが、表示させたい情報を追跡したり、並び替えをしたりするときに結びつきを強くするための情報がkeyです。
:key="index"がよくない理由
keyの値は一意の値が必要ということでした。
** 一意 ＝ ダブっていない**
indexは一見ダブらない数字ですが、データの削除などを行った場合にindexの値も変化するため、適切な動作にならないこともあり、避けた方が良いでしょう。