rokujiro.qrunch.io読者になる5【Vue.js】v-forにkey属性を指定すべき理由と、指定してはいけないパターンVue.jsJavaScript投稿日:2019-01-07最終更新:2019-01-07クロス元の投稿をみる(https://dolphin-rokuj...)v-forにはkeyを常に指定するVue.jsのスタイルガイドによると、v-forディレクティブを使う際、keyを指定することは必須のようです。keyを指定するというのは、以下のようにkey属性に一意の値をバインディングすることです。CodePen.keyを指定する理由keyを指定する理由は、Vueが各要素を効率よく追跡できるようにするため、ということのようです。言うとパフォーマンス向上のためということでしょうか。v-forにkeyを指定してはいけないパターンしかし例外があり、keyを指定してはいけない場合もあるようです。(ややこしい)keyに指定するのは一意の値である必要があり、これが一意の値にならない場合、妙な動作をする可能性があるようです。以下のように単純な配列をループさせていて、配列のインデックスをkeyに指定しているとします。CodePen.一見問題無さそうに思えますが、この配列のインデックスは厳密には一意ではありません。配列の途中に新しい要素が追加されたり、先頭の要素が削除されたりした場合、インデックスは変わってしまうからです。具体的にどんな不具合を起こすのかは、以下の記事に詳しく書かれています。一意なインデックスが無い場合は、無理にkeyを指定しなくてもいいようです。Qrunch.netサーバー提供フィードバックを送信する。