--- title: 【Vue.js】v-forでkeyが指定された場合とされなかった場合の違いについて tags: Vue.js:2.6.10 初心者 author: terufumi1122 slide: false --- ## はじめに Vue.jsで`v-for`を使ったとき、`key`が指定された場合とされなかった場合の違いについて考えてみました。 keyについての公式ドキュメントは[こちら](https://jp.vuejs.org/v2/api/#key) ## この記事が役に立つ方 - Vue.js初心者 ## この記事のメリット - `v-for`で`key`が必要な理由が分かる ## 環境 ``` - macOS Catalina 10.15.1 - Vue.js: 2.6.10 ``` ## `key`とは? 公式ドキュメントでは、 > key 特別属性は、主に古いリストの代わりにノードの新しいリストを差分算出する VNode を識別するために Vue の仮想 DOM アルゴリズムに対するヒントとして使用されます。キーがない場合、Vue は要素の移動を最小限に抑えるアルゴリズムを使用し、可能な限りその場で同じタイプの要素にパッチ適用/再利用しようとします。キーがある場合は、キーの順序の変化に基づいて要素を並べ替え、そして、もはや存在しないキーを持つ要素は常に削除/破棄されます。 とあります。 ん〜、よくわかりません:weary: シンプルに、**データに一意性を持たせる**と解釈しましょう! ## `v-for`を使うときは必須 ### 理由:**処理速度**向上のため。 なぜ処理速度が早まるんでしょうか? 以下のような、フルーツの価格を表示するだけの簡単なコードがあります。 `Delete`ボタンを押して、**2番目の要素`banana`**を削除したときの動きを例にします。 ```html:index.heml Fruits
``` ```javascript:main.js var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'apple', price: 100 }, { id: 2, name: 'banana', price: 150 }, { id: 3, name: 'orange', price: 200 } ] }, methods: { doRemove: function(index) { this.list.splice(index, 1) } } }) ``` このプログラムで`Delete`で`id:2のbanana`が削除された場合、配列の中身はこうなります。 【Before】 |配列のインデックス|id|name|price| |:-:|:-:|:-:|:-:| |0|1|apple|100| |1|2|banana|150| |2|3|orange|200| ↓ 【After】 |配列のインデックス|id|name|price| |:-:|:-:|:-:|:-:| |0|1|apple|100| |1|3|orange|200| ### 1.keyがない場合 要素の中の**文字**が変更されたと解釈されてしまうため、 `orange`は**別な要素とみなされる**ので`id`・`name`・`price`が**更新される**。 ### 2.keyがある場合 `id:3のorange`の**インデックス**は変わるが、**同じ要素とみなされる**ので`id`・`name`・`price`には**更新されない**ので早い。 配列要素の、**順番が入れ替わったとき**の処理が短縮されるから早くなるということですね。 ## 参考:Vue.js スタイルガイド [スタイルガイド — Vue.js](https://jp.vuejs.org/v2/style-guide/index.html) ## おわりに 最後まで読んで頂きありがとうございました:bow_tone1: 今回、3つだけのリストを例にして考えてみましたが、これが大量のデータになってくると処理速度は相当変わりそうですね:thinking: 万が一解釈に誤り等あればご指摘頂ければと思います。 ## 参考にさせて頂いたサイト(いつもありがとうございます) [スタイルガイド — Vue.js](https://jp.vuejs.org/v2/style-guide/index.html)