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的值

 

 

 

 

posted @ 2021-09-28 15:41  CHUNYIN  阅读(509)  评论(0)    收藏  举报