Vue中key的作用是什么？

在Vue的列表渲染（v-for）或条件渲染中，key是一个特殊的属性。它的核心作用是给Vue的虚拟DOM算法提供提示，以便它能够更高效、更准确地跟踪每个节点的身份，从而重用和重新排序现有元素。没有正确的key，在某些场景下可能会导致渲染错误或性能下降。

识别节点身份，避免就地复用

当Vue更新使用v-for渲染的列表时，默认采用“就地更新”策略。如果数据项的顺序被改变（例如排序、插入、删除），Vue不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素的内容。这对于纯展示的列表可能没问题，但当列表项包含有状态（如表单输入、组件状态）的DOM元素时，就会出问题。

<template>
  <div v-for="item in list">{{ item.name }}</div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' }
      ]
    };
  }
}
</script>

如果list顺序反转，Vue会直接复用两个<div>元素，只是更新其内部的文本节点。这很快，但如果每个项内部有输入框，问题就来了。

<template>
  <div v-for="item in list" :key="item.id">
    {{ item.name }}: <input />
  </div>
</template>

如果没有:key="item.id"，反转列表后，输入框的DOM元素会被复用，导致输入的内容（与DOM元素绑定）错位。而有了唯一的key，Vue就能根据key识别出每个节点的身份，知道“id为1的项”应该移动到新位置，而不是就地更新，从而正确保持其内部状态。

触发组件生命周期

对于组件列表，key的作用更加关键。没有key或key不唯一时，Vue会尽可能复用相同类型的组件实例，这会导致组件的生命周期钩子（如mounted、updated）不会被正确触发。

<ChildComponent v-for="item in items" :key="item.id" :item="item" />

使用唯一的key（通常是数据中的id字段）可以告诉Vue：“即使它们看起来相似，但这是两个不同的组件实例”。这样，当数据项的顺序变化时，Vue会正确地移动组件实例，并触发适当的生命周期钩子。

强制替换元素/组件

key的另一个妙用是强制替换一个元素或组件，而不是复用它。通过改变key的值，你可以告诉Vue：“这是一个全新的东西，请销毁旧的，创建新的。”

<template>
  <span :key="language">{{ message }}</span>
</template>
<script>
export default {
  data() {
    return { language: 'zh' };
  },
  computed: {
    message() {
      return this.language === 'zh' ? '你好' : 'Hello';
    }
  }
}
</script>

当language变化时，key也随之改变，Vue会销毁旧的<span>并创建一个新的，而不是更新其文本内容。这在某些需要完全重置内部状态或触发过渡动画的场景下很有用。

因此，key是Vue高效渲染的基石。在v-for中，总是应该提供一个稳定、唯一的key（避免使用索引index，除非列表是静态的）。理解其原理，能帮助你避免隐藏的bug并写出更健壮的Vue应用。