v-for循环为什么不建议用index作为key

在 Vue 中，key 是用来识别和跟踪虚拟 DOM 中的每个节点的标识符。当数据源中的数据发生变化时，Vue 根据节点的 key 和相应的数据进行比对，以便确定哪些节点需要更新。因此，正确的使用 key 是非常重要的，可以提高渲染性能，避免不必要的重新渲染。

通常情况下，我们使用一个唯一的值来作为每个节点的 key，这样可以确保每个节点都有一个独特的标识符，方便 Vue 进行跟踪和比对。然而，在使用 v-for 循环渲染列表时，如果没有提供一个唯一的标识符作为 key，Vue 会默认使用循环的索引作为 key。例如：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
  </template>

在这个例子中，我们使用循环的索引 index 作为每个节点的 key。这种方式看似方便简单，但实际上存在以下问题：

节点顺序发生变化时，会导致不必要的重新渲染。当列表的数据源发生变化时，新旧数据的顺序可能会发生变化。如果两次渲染的节点顺序不同，即使实际上这些节点的内容是一样的，也会导致整个列表的重新渲染。这是因为 Vue 无法识别出新旧节点的对应关系，只能全部重新渲染。

删除和插入节点时，会导致不必要的重新渲染。当从列表中删除或插入一个节点时，所有后续节点的索引都会发生变化。如果我们以循环的索引作为 key，这些节点的 key 值也会随之发生变化，导致它们被识别为新创建的节点，而不是仅更新相应的内容。这将导致整个列表的重新渲染，即使实际上只有一个节点发生了变化。

因此，为了避免以上问题，我们不建议使用循环的索引作为节点的 key。相反，应该尽可能使用具有唯一性的值作为 key，例如每个数据项的唯一 ID，以便正确地跟踪和比对节点，提高渲染性能。