Why can't index be the key of V-for?

One 、 Why use key？

key The main function of is to update the virtual database efficiently DOM.

for example , stay B and C Insert between F：

Diff The default execution process of the algorithm ：

This kind of practice C Update to F,D Update to C,E Update to D, Finally, insert E, This is not efficient , And the performance is not good enough .

But if you use key Give each node a unique identification ,Diff The algorithm can correctly identify this node , Find the right place to insert a new node .

Two 、index Why not as v-for Of key？

Take the following code for example , Delete 'one'：

<template>
    <div v-for="(item, index) in list" :key="index" >{
   {item.num}}</div>
</template>

const list = [
    {
    
        id: 0,
        num: "zero"
    },
    {
    
        id: 1,
        num: "one"
    },
    {
    
        id: 2,
        num: "two"
    },
    {
    
        id:3,
        num:"three"
    }
];

Before deleting ：

key	id	index	num
0	0	0	zero
1	1	1	one
2	2	2	two
3	3	3	three

After deleting ：

key	id	index	num
0	0	0	zero
1	2	1	two
2	3	2	three

here , except zero Outside ,two and three Because it was found to be corresponding key The binding relationship of has changed , So it was re rendered , Easy to affect performance .