はじめに
Vue.jsでv-forを使ったとき、keyが指定された場合とされなかった場合の違いについて考えてみました。
keyについての公式ドキュメントはこちら
この記事が役に立つ方
- Vue.js初心者
この記事のメリット
-
v-forでkeyが必要な理由が分かる
環境
- macOS Catalina 10.15.1
- Vue.js: 2.6.10
keyとは？
公式ドキュメントでは、
key 特別属性は、主に古いリストの代わりにノードの新しいリストを差分算出する VNode を識別するために Vue の仮想 DOM アルゴリズムに対するヒントとして使用されます。キーがない場合、Vue は要素の移動を最小限に抑えるアルゴリズムを使用し、可能な限りその場で同じタイプの要素にパッチ適用/再利用しようとします。キーがある場合は、キーの順序の変化に基づいて要素を並べ替え、そして、もはや存在しないキーを持つ要素は常に削除/破棄されます。
とあります。
ん〜、よくわかりません
シンプルに、データに一意性を持たせると解釈しましょう！
v-forを使うときは必須
理由：処理速度向上のため。
なぜ処理速度が早まるんでしょうか？
以下のような、フルーツの価格を表示するだけの簡単なコードがあります。
Deleteボタンを押して、2番目の要素bananaを削除したときの動きを例にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Fruits</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item.id">
<p>{{ item.name }}： {{ item.price }}円</p>
<button @click="doRemove(index)">Delete</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
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 スタイルガイド
おわりに
最後まで読んで頂きありがとうございました
今回、３つだけのリストを例にして考えてみましたが、これが大量のデータになってくると処理速度は相当変わりそうですね
万が一解釈に誤り等あればご指摘頂ければと思います。