vue为什么不推荐使用index作为key1.用index作key时，如果v-for遍历的数据的顺序结构被改变了，会导致

1.用index作key时，如果v-for遍历的数据的顺序结构被改变了，会导致产生不必要的真实dom更新，例如下面所示

<template>
    <div>
        <div class="exmple" v-for="(item,index) in list" :key="index">{{o}}</div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            list:[100,500,300]
        }
    },
    mouted(){
        this.list.unshift(200)//改变了list里的数据顺序结构
    }
}
</script>

上述操作将导致每一个exmple的文本内容（真实文本dom）被更新，哪怕其中绝大部分并没有实质的改变，但是依然会被重写，如果改为用item则不会产生上述问题，这里本质的原因是diff函数在比较新旧虚拟dom（vnode）时，会把同属一个节点下的拥有相同key的子节点视为同一个节点，进而会去比较这两者内容（子节点）的不同，然后将不同的地方重新渲染到真实dom上