Vue中Key唯一标识作用小结

前言

在开发 Vue 列表渲染时，编辑器总是提醒我们“必须绑定 key”。很多人习惯性地填入 index。但你是否思考过：key 到底在底层起到了什么作用？为什么不合理的 key 会导致组件状态错乱甚至性能崩溃？

一、 :key 的核心作用：虚拟 DOM 的“导航仪”

在 Vue 更新 DOM 时，其核心算法是 Diff 算法。key 的主要作用是更高效地更新虚拟 DOM。

1. 节点复用的关键

Vue 会通过判断两个节点是否为“相同节点”，从而决定是销毁重建还是原地复用。 判断相同节点的必要条件包括：

• 元素类型与Key 值 ：Vue判断两个节点是否相同时，主要判断两者的key和元素类型是否相等，因此如果不设置key且元素类型相同的话，它的值就是undefined（而undefined恒等于undefined），则vue可能永远认为这是两个相同节点，只能去做更新操作，从而尝试“原地复用”它们。

提示：虚拟Dom与diff算法会在后续单独讲解

二、 为什么要绑定 Key？

1. 不带 key（原地复用策略）

当列表顺序被打乱时，Vue 不会移动 DOM 元素来匹配列表项的顺序，而是就地更新每个元素。

• 弊端：如果列表项包含有状态的子组件或受控输入框（如 <input>），原本属于 A 项的输入框内容会“残留”在 B 项的位置上，造成 UI 错乱。
• 性能：导致频繁的属性更新和 DOM 操作，效率低下。

2. 带有 key（精准匹配策略）

有了 key 作为唯一标识，Vue 能根据 key 精准找到旧节点树中对应的节点。

• 优势：Vue 会移动元素而非重新渲染，极大减少了不必要的 DOM 操作，显著提升性能。

三、为什么不推荐使用 Index 作为 Key？

这使用 index 在进行增删、排序操作时，如果在列表头部添加一个新子项时，原列表所有的子项index都会+1，这会让vue认为列表全改变了，需要全部重新生成，从而造成性能损耗。

示例：

<script setup lang="ts">
import { ref } from 'vue'

interface User {
  id: number;
  name: string;
}

const users = ref<User[]>([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
])

const insertUser = () => {
  // 在头部插入一条数据
  users.value.unshift({ id: Date.now(), name: '新同学' })
}
</script>

<template>
  <div>
    <button @click="insertUser">头部插入数据</button>
    <ul>
      <li v-for="(item, index) in users" :key="index">
        {{ item.name }} <input type="text" placeholder="输入评价" />
      </li>
      
      <hr />

      <li v-for="item in users" :key="item.id">
        {{ item.name }} <input type="text" placeholder="输入评价" />
      </li>
    </ul>
  </div>
</template>

四、 总结

1. 唯一性：key 必须在当前循环层级中是唯一的，不能重复。
2. 稳定性：不要使用 Math.random() 作为 key，否则每次渲染都会强制销毁重建所有节点，性能极其低效。
3. undefined 陷阱：如果不设置 key，它的值就是 undefined。在 Diff 对比时，Vue 会认为两个 undefined 节点是“相同”的，这正是导致频繁更新、影响性能的根源。

到此这篇关于Vue中Key唯一标识作用小结的文章就介绍到这了,更多相关Vue Key唯一标识内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论