假设我们要渲染一个简单的待办事项列表：
<div id="app">
<div v-for="item in list">
<input type="checkbox">
<span>{{ item.text }}</span>
</div>
</div>
当我们删除中间某个项目时，你可能会发现复选框的状态出现了错误。选中的项目被删除了，但其他项目的选中状态却乱了套。
问题的根源
Vue在更新DOM时，会尽量复用已有的元素。这是一种优化策略，可以减少DOM操作，提高性能。
但是，当数据顺序发生变化时，Vue需要知道哪些元素可以复用，哪些需要重新创建。如果没有key，Vue只能按照顺序进行对比。
没有key的情况：
- • Vue按顺序对比新旧节点
- • 删除第二个元素后，后面的元素会前移
- • Vue认为这是同一个元素，只是内容变了
- • 复用的元素保留了之前的状态
key的作用
key给每个节点一个唯一标识。Vue通过这个标识来跟踪每个节点的身份。
<!-- 正确的写法 -->
<div v-for="item in list" :key="item.id">
<input type="checkbox">
<span>{{ item.text }}</span>
</div>
加上key之后：
- • Vue知道每个节点的唯一身份
- • 删除某个节点时，其他节点身份不变
- • 不会错误地复用其他节点的状态
- • 列表更新更加准确
深入理解虚拟DOM
要理解key的重要性，我们需要了解Vue的虚拟DOM机制。
虚拟DOM是什么
虚拟DOM是真实DOM的JavaScript对象表示。Vue通过对比新旧虚拟DOM的差异，来决定如何更新真实DOM。
Diff算法
Vue使用Diff算法来比较虚拟DOM的差异。这个算法会找出最小的变更，然后应用到真实DOM上。
没有key的Diff过程：
- • 按顺序逐个比较节点
- • 发现长度变化，进行插入或删除
- • 可能导致大量不必要的DOM操作
有key的Diff过程：
- • 根据key建立映射关系
- • 精确找到新增、删除、移动的节点
- • 最小化DOM操作
key的选择
选择合适的key很重要。不合适的key可能带来问题。
好的key选择
- • 数据中的唯一标识符
- • 稳定的、不会改变的值
- • 如：数据库ID、UUID等
// 好的例子
const list = [
{ id: 1, text: '学习Vue' },
{ id: 2, text: '写代码' },
{ id: 3, text: '阅读文档' }
]
不好的key选择
- • 数组索引（在排序、过滤时会出问题）
- • 随机数（每次渲染都会变化）
- • 可能重复的值
// 不好的例子 - 使用索引作为key
<div v-for="(item, index) in list" :key="index">
// 不好的例子 - 使用随机数作为key
<div v-for="item in list" :key="Math.random()">
实际开发中的场景
列表排序
当列表需要排序时，key的作用特别明显。
// 初始列表
[
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
// 排序后
[
{ id: 3, name: '橙子' },
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' }
]
有key时，Vue知道这是元素位置的移动，而不是内容的修改。
列表过滤
过滤列表时，key确保正确的元素被保留或移除。
动态组件
在动态组件中，key可以强制组件重新创建：
<component :is="currentComponent" :key="componentKey">
改变componentKey会触发组件的重新渲染。
性能考虑
什么时候可以不加key
在某些简单场景下，不加key可能不会立即发现问题：
- • 静态列表，永远不会改变
- • 列表项没有内部状态
- • 列表项非常简单
但为了代码的健壮性，建议始终加上key。
错误的使用方式
有些开发者会这样使用key：
<!-- 错误：使用索引作为key -->
<div v-for="(item, index) in list" :key="index">
<!-- 错误：使用不稳定的值作为key -->
<div v-for="item in list" :key="Math.random()">
这些用法都会导致各种奇怪的问题。
常见问题解答
为什么不能用索引作为key？
当列表发生变化时，索引也会变化。原来索引为1的元素，在删除前面的元素后，可能变成索引0。这会导致Vue错误地复用元素。
key一定要全局唯一吗？
在同一个v-for中唯一即可，不需要全局唯一。
如果没有唯一标识怎么办？
如果数据源没有提供唯一标识，可以考虑：
-
- 在获取数据时生成唯一ID
-
- 使用多个字段组合作为key
-
- 使用第三方库生成UUID
记住：key是Vue跟踪节点身份的标识，不是普通的属性。
写在最后
理解key的作用，能帮助我们写出更稳定、性能更好的Vue应用。这个看似小的细节，在实际开发中却很重要。
下次使用v-for时，记得给它一个合适的key。
