为什么使用v-for时，给对应的元素或组件添加上一个key属性？

我是你要找的bug

于 2020-09-02 14:54:37 发布

阅读量318

点赞数

分类专栏： Vue v-for 文章标签： vue v-for

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/108361545

版权

Vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

v-for

1 篇文章

订阅专栏

本文探讨了在Vue中使用v-for指令时为何需要为元素或组件添加key属性。关键在于key帮助优化虚拟DOM的Diff算法，确保高效地更新列表，并正确定位新插入的节点。通过key，Vue能准确识别每个节点，避免不必要的DOM操作，提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么需要这个key属性呢？
这个其实和Vue的虚拟DOM的Diff算法有关系

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

我们希望可以在B 和 C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，这样是不是很没有效率？

在这里插入图片描述

所以我们需要使用key来给每一个节点做一个唯一标识

Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点

在这里插入图片描述

所以：key的作用主要是为了高效的更新虚拟DOM

代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
  <ul>
      <li v-for="item in letters" :key="item">{{item}}</li> //key绑定的元素必须具有唯一性（所以不能用index绑定，用item具有唯一性）
  </ul>

</div>

<script src="js/vue.js"></script>
<script>
    const app = new  Vue({
        el:"#app",
        data:{
            letters:["A","B","C","D","E"]
        }
    })
</script>
</body>
</html>