Vue-for指令中，key的重要性

先看下面一段简单的代码（v-for中没有设置key值）

    <input type="button" value="点我添加人员(无key)" @click.once="add1">
  <ol>
    <li v-for="(p,index) in arry">
        {{p.name}}<input type="text">
    </li>
  </ol>

data:{
        arry:[
            {name:"张山",id:1},
            {name:"李思",id:2},
            {name:"王五",id:3},
        ]
    },
    methods:{
        add1(){
            this.arry.unshift({name:"赵六",id:4})
        },

效果图

这边的样例就是，当我点击按钮时，就会给arry数组前面新增一项数据

倘若我们现在文本框里面添加一些内容

然后我们再点击这个按钮的效果

这个时候我们发现，这里文本框的位置错位了

原因：

* key值，是每个元素的唯一标识【相当于人的身份证号】
* 就是在没有设置key值的时候，key是有默认值的，默认值为index，就是数组的索引
* 这里有关虚拟DOM的对比算法，key就是对比的一个重要依据
* 在我们新添加数组元素的时候，由于是在数组前面添加，就打乱了数组原本的顺序，导致index错位
* 然后再进行虚拟DOM对比的时候，虚拟DOM认为，之前的虚拟DOM和现在的虚拟DOM差别只有一个name，所以就把原来的input框直接拿来用了
* 但是，倘若我们设置了唯一标识的key值，那么新旧的虚拟DOM对比就会认为，新添加的元素是一个新元素，就会重新生成真真的DOM

更改后的样子

<input type="button" value="点我添加人员(id，key)" @click.once="add1">
    <ol>
        <li v-for="(p,index) in arry" :key="p.id">
            {{p.name}}<input type="text">
        </li>
    </ol>

methods:{
    add1(){
        this.arry.unshift({name:"赵六",id:4})
    },
}