Help us understand the problem. What is going on with this article?

【Vue.js】v-forでkeyが指定された場合とされなかった場合の違いについて

はじめに

Vue.jsでv-forを使ったとき、keyが指定された場合とされなかった場合の違いについて考えてみました。

keyについての公式ドキュメントはこちら

この記事が役に立つ方

  • Vue.js初心者

この記事のメリット

  • v-forkeyが必要な理由が分かる

環境

- macOS Catalina 10.15.1
- Vue.js: 2.6.10

keyとは?

公式ドキュメントでは、

key 特別属性は、主に古いリストの代わりにノードの新しいリストを差分算出する VNode を識別するために Vue の仮想 DOM アルゴリズムに対するヒントとして使用されます。キーがない場合、Vue は要素の移動を最小限に抑えるアルゴリズムを使用し、可能な限りその場で同じタイプの要素にパッチ適用/再利用しようとします。キーがある場合は、キーの順序の変化に基づいて要素を並べ替え、そして、もはや存在しないキーを持つ要素は常に削除/破棄されます。

とあります。

ん〜、よくわかりません:weary:

シンプルに、データに一意性を持たせると解釈しましょう!

v-forを使うときは必須

理由:処理速度向上のため。

なぜ処理速度が早まるんでしょうか?

以下のような、フルーツの価格を表示するだけの簡単なコードがあります。
Deleteボタンを押して、2番目の要素bananaを削除したときの動きを例にします。

index.heml
<!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>
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)
        }
    }
})

このプログラムでDeleteid: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別な要素とみなされるのでidnameprice更新される

2.keyがある場合

id:3のorangeインデックスは変わるが、同じ要素とみなされるのでidnamepriceには更新されないので早い。

配列要素の、順番が入れ替わったときの処理が短縮されるから早くなるということですね。

参考:Vue.js スタイルガイド

スタイルガイド — Vue.js

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

今回、3つだけのリストを例にして考えてみましたが、これが大量のデータになってくると処理速度は相当変わりそうですね:thinking:

万が一解釈に誤り等あればご指摘頂ければと思います。

参考にさせて頂いたサイト(いつもありがとうございます)

スタイルガイド — Vue.js

terufumi1122
小売業経験8年。異業種から未経験・完全独学でサーバーサイドエンジニアになった人。 ストックついでに「いいね!」もしてもらえると嬉しいです。 HTML/CSS/JavaScript/Vue.js/Ruby/Ruby on Rails #駆け出しエンジニアとつながりたい #元転勤族
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした