笔记——聊一聊vue的v-for中key的作用（diff算法）

文章目录

前言

一、key是什么？

二、有key和无key的区别（diff算法）

1.无key的diff算法

2.有key的diff算法

总结

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着编程技术的不断发展，VUE学习这门技术也越来越重要，很多公司对vue的基础要求很高，本文就介绍了v-for的基础内容。

---

提示：以下是本篇文章正文内容

一、key是什么？

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。

<temptlate>
    <div>
        <div v-for="item in arr" :key="arr">
            {{ arr }}
        </div>
    </div>
</template>

<script setup lang="ts">
const arr:string[] = ["A", "B", "C", "D"]
arr.splice(2,0,'DDD')
</script>

二、有key和无key的区别（diff算法）

1.无key的diff算法

将新的Vnode替换旧的Vnode，最后发现多了一个D就会新增然后插入，如果少了，比如少了C和D就会进行第三步的删除

ABCD是旧的Vnode中有的，这里产生的复用，替换掉就会浪费性能

无key渲染步骤如下（示例）：

2.有key的diff算法

先头和头比较再尾和尾比较，发现多出来一个就新增，反之少了就卸载。

有key渲染步骤如下（示例）：

所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：
在没有key的时候我们的效率是非常低效的；
在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；

---

总结

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
否则vue只会替换其内部属性而不会触发过渡效果。