v-forでkey属性を指定する意味

vueのコードを見ていて v-for などで key 属性が何かを忘れて調べるをすること3回目。
覚えるための記事ということで。。自分用のメモ

key属性の仕様

まず仕様はこちら。

v3.ja.vuejs.org

キーがない場合、Vue は要素の移動を最小限にするアルゴリズムを使い、できる限り同じ種類の要素をその場でパッチや再利用しようとします。 キーがある場合、キーの変更順序に基づいて要素の順番を変更して、存在しなくなったキーを持つ要素は常に削除や破棄されます。

key属性なしで動かしてみる

See the Pen key属性無しv-for by azukineko (@azukineko) on CodePen.

この色のテキストボックスに色を入力する

その後に3番のレモンを削除すると、項目がズレてしまう

これはkey属性を指定しない場合にできる限り同じ種類の要素を再利用しようとする仕様のため。

key属性ありで動かしてみる

See the Pen by azukineko (@azukineko) on CodePen.

こちらで同じ動作をさせるとkey属性を指定したtr要素ごと削除などが適用される。