BETA

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

投稿日:2019-01-07
最終更新:2019-01-07
※この記事は外部サイト(https://dolphin-rokujiro.com/work/vue-js/v...)からのクロス投稿です

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を指定しなくてもいいようです。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@rokujiroの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!