Vue v-for key的作用

关于 v-for

Vue 为我们做了太多的事情，以致于有很多规则需要记忆，否则就会出现问题

就比如说常见的 v-for 中的 key，我们观察下去掉 key 会怎样

<template>
    <div>
        <div v-for="(stu,index) in stus">
            <input type="checkbox"/>
            {{stu}}
        </div>
        <button @click="add">add</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            stus:['frank','jack','mike']
        }
    },
    methods:{
        add(){
            this.stus.unshift('smith')
        }
    }
}
</script>

点击 add，会在第一项之前插入新的一项，我们先选中 frank，再点击 add，神奇的事情发生了 本来我们选中的是 frank，结果新增的 smith 却被选中了

这是因为 key 是虚拟 DOM 用来辨别节点是否被修改的标识，选择就地复用，或是重新渲染

对于这里发生的现象，我理解为对 frank 中的复选框状态的复用，没有 add 之前，从 DOM 结构上来看，第一个复选框是被选中的

增加 smith 后，由于没有 key 的标识，vue 无法将新旧节点进行对比，所以，虽然被选中的复选框是属于 frank 的，但是 vue 并没有对节点进行移动，而只是替换了被插入的名字

如果拥有了 key 属性之后，虚拟 DOM 和真实 DOM 进行对比

如果它们的 key 相同，则最大程度上复用此处每个元素

如果 key 不相同，则创建新的 DOM 并渲染到页面上