【Vue.js】v-forにkey属性を指定すべき理由と、指定してはいけないパターン

【Vue.js】v-forにkey属性を指定すべき理由と、指定してはいけないパターン

v-forにはkeyを常に指定する

Vue.jsのスタイルガイドによると、v-forディレクティブを使う際、keyを指定することは必須のようです。
keyを指定するというのは、以下のようにkey属性に一意の値をバインディングすることです。

See the Pen maLXEN by 匠 (@dilphinrokujiro) on CodePen.

keyを指定する理由

keyを指定する理由は、Vueが各要素を効率よく追跡できるようにするため、ということのようです。
ざっくり言うとパフォーマンス向上のためということでしょうか。

v-forにkeyを指定してはいけないパターン

しかし例外があり、keyを指定してはいけない場合もあるようです。(ややこしい)
keyに指定するのは一意の値である必要があり、これが一意の値にならない場合、妙な動作をする可能性があるようです。

例えば、以下のように単純な配列をループさせていて、配列のインデックスをkeyに指定しているとします。

See the Pen oJdEwV by 匠 (@dilphinrokujiro) on CodePen.


一見問題無さそうに思えますが、この配列のインデックスは厳密には一意ではありません
配列の途中に新しい要素が追加されたり、先頭の要素が削除されたりした場合、インデックスは変わってしまうからです。

具体的にどんな不具合を起こすのかは、以下の記事に詳しく書かれています。

v-forディレクティブを使用する場合、基本的にはkey属性を指定し、
一意なインデックスが無い場合は、無理にkeyを指定しなくてもいいようです。