はじめに
Vue.jsのv-for正しい使い方で実装できていますか。
細かい話ですがつい先日Vue.jsのv-for実装する時、他のソースコード見てみるとkey属性が指定されていませんでした。
後ほど説明しますが例外を除いてはkey属性を指定することが奨励されています。
（バージョン2.2.0以降の話なのでそれ以前のもので実装されている方は軽い気持ちでで読んでください。）
Vue.jsのv-forのkey属性については公式ドキュメントにも以下のように書いてあります。
繰り返される DOM の内容が単純な場合や、性能向上のために標準の動作に意図的に頼る場合を除いて、可能なときはいつでもv-forにkey属性を与えることが推奨されます。
なぜkey属性を指定することが奨励されているのか
これはいかなるデータもコンポーネントへ自動的に渡すことはありません。なぜなら、コンポーネントはコンポーネント自身の隔離されたスコープを持っているからです。反復してデータをコンポーネントに渡すためには、プロパティを使うべきです。
公式ドキュメントにはこう書いてありますと言ってしまえばその限りなのですが、keyを指定するとVue.jsが各要素を効率よく追跡できるようになりパフォーマンス向上するからです。
key属性を指定したソースコード
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
【注意】v-forにkeyを指定してはいけないパターン
Vue.jsのv-forのkey属性を推していましたが指定してはいけないパターンがあります。
keyに指定するのは一意の値である必要があり、これが一意の値にならない場合はkey属性を指定してはいけません。
正しく動作しないなどのエラーになるのでお気をつけください。
最後に
いかがでしたでしょうか。
なんとなくや前のソースコード参考にという形で実装していると思わぬ落とし穴もあるので、常に疑いながら実装することは大事かもしれませんね。