Vue学习-vue中v-for为何要加key？index为何不推荐作为key

参考：

https://blog.csdn.net/weixin_42878211/article/details/107853208 

 

<template>
    <div class="slot-index">
        <div>
            <div>
                无key:<input v-model="name1" type="text" />
                <button @click="add(name1)">
                    添加
                </button>
            </div>
            <ul>
                <li v-for="(item, i) in list">
                    <input type="checkbox" />{{ item.name }}
                </li>
            </ul>
        </div>
        <div>
            <div>
                index为key:<input v-model="name2" type="text" />
                <button @click="add(name2)">
                    添加
                </button>
            </div>
            <ul>
                <li v-for="(item, index) in list" :key="index">
                    <input type="checkbox" />{{ item.name }}
                </li>
            </ul>
        </div>
        <div>
            <div>
                item.id 为key: <input v-model="name3" type="text" />
                <button @click="add(name3)">
                    添加
                </button>
            </div>
            <ul>
                <li v-for="item in list" :key="item.id">
                    <input type="checkbox" />{{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Demo1Slot',
    components: {},
    props: {},
    data: function() {
        return {
            name1: '',
            name2: '',
            name3: '',
            id: 4,
            list: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王二' }]
        }
    },
    methods: {
        add(name) {
            this.list.unshift({ id: this.id, name })
            this.id = this.id + 1
            // this.namne = ''
        }
    }
}
</script>
<style lang="scss" scope>
.slot-index {
    &-item {
        margin-bottom: 10px;
    }
}
</style>

 

 

 

 

 

 总结： 

可以简单得理解：加了具有唯一性得key之后，id的checkbox跟内容进行了一个关联，是我们所要展示的效果

1、vue 中template模板会编译为渲染函数render，然后对比虚拟DOM，再更新到真实DOM上。
2、有key：通过移动节点复用节点来更新DOM
3、无key：会通过删除新建节点来更新DOM
4、使用下标index作为Key：数组的操作删除新增排序，会造成BUG

 

diff

diff算法的处理方法

对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：

 

 

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。
比如下面这种情况：

 

 

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

 

 

即把C更新成F，D更新成C，E更新成D，最后再插入E，相当没有效率！（删除重建）
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

 

 

 

vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id 等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。但是我们不推荐使用index作为key！

总结：key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。

不推荐index作为key值

当以数组为下标的index作为key值时，其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变
diff算法时比较同级之间的不同，以key来进行关联，当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的index都会发生改变，那么key自然也跟着全部发生改变，所以index作为key值是不稳定的，而这种不稳定性有可能导致性能的浪费，导致diff无法关联起上一次一样的数据。因此，能不使用index作为key就不使用index。

也不推荐index+字符串作为key的值