VUE v-for中的:key详解

当在 Vue 的模板中使用 v-for 来循环渲染一组 DOM 元素时，每个被渲染的元素都要有一个唯一的 key 属性。这个属性在 Vue 的模板编译器中扮演着非常重要的角色，它可以帮助 Vue 跟踪每个被渲染的元素的身份和状态，从而优化渲染效果。

key 的作用

一个简单的示例，我们假设一个列表，其中有一些元素是需要从列表中删除的，那么删除时就需要更新数据源，并调用 Vue 中的 splice() 方法，在更新后， DOM 会进行重渲染。但是，由于 Vue 是采用高效的 “就地重用” 策略，并且不会每次都创建新的 DOM 元素，而是尽可能的复用已经存在的元素，然后在 JavaScript 中对其进行更新。

如果没有为 v-for 循环中的每个元素提供一个唯一的 key，那么 Vue 可能无法识别新的更新内容，并且会把之前存在的元素错误的重复使用到更新过的 DOM 中。如果你提供了一个唯一的 key，Vue 在进行 DOM 操作时就会基于 key 来决定使用已有的节点或者生成新节点。

key 的用法

在 v-for 模板中使用 key，只需要在被循环的元素上增加 :key 属性即可。例如：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

在上面的例子中，我们假设数组 items 中的每个元素都有一个 id 属性。Vue 将使用 id 属性来映射每个 DOM 节点，并且当更新数组 items 时，会根据节点的 key 值来决定是否进行原地更新、添加或删除。

v-for 中的 key 详解

1. 在使用 v-for 循环渲染列表时，key 必须保证其唯一性，最好是使用数组中的唯一标识符作为 key，比如 item.id。
2. key 属性的值必须是简单数据类型（可以是数字、字符串或布尔值），而不是对象或数组等引用类型。
3. 如果你使用不合适的 key 值，会发生错误，比如 key 值重复等。
4. 当在循环渲染时，如果没有为每个元素指定 key 属性，Vue 会强制要求你添加它，否则会有一个警告。
5. 不要使用非唯一或不相关的值，如索引值，作为 key，这会导致性能变差，并可能影响到渲染结果。

示例1

以下是一个简单的示例，展示了如何将数组中的元素渲染为一个列表，并且使用 key 属性来跟踪每个元素。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Grape' },
      ]
    }
  }
}
</script>

在上面的代码中，我们为 li 标签增加了 :key 属性，并且使用了每个元素的 id 属性作为其值。当更新数组中的元素时，Vue 会根据 key 的值来决定是否重用已有元素或创建新的元素。

示例2

以下是另一个示例，其中演示了当列表项的数量发生更改时，渲染新元素和删除旧元素的行为。在这个例子中，我们添加了一个按钮，除了不改变列表中的示例外，它会在每个单击操作时随机添加或删除一个元素。

<template>
  <div>
    <button @click="handleClick">{{ buttonLabel }}</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: 'Apple' },
        { id: 2, title: 'Banana' },
        { id: 3, title: 'Orange' },
        { id: 4, title: 'Grape' },
      ],
      buttonLabel: 'Add/Remove',
    }
  },
  methods: {
    handleClick() {
      const index = Math.floor(Math.random() * 4);
      if (this.items.length >= 4) {
        this.items.splice(index, 1);
      } else {
        this.items.push({
          id: Math.floor(Math.random() * 1000),
          title: 'New Item'
        });
      }
    }
  }
}
</script>

在上面的代码中，我们使用 v-for 循环渲染了一个 Ul 元素，并且为每个 li 元素指定了唯一的 key 属性。当单击按钮时，代码会随机添加或删除一个元素，从而演示了 key 属性的作用。