详解为什么Vue中不要用index作为key(diff算法)

为什么Vue中不要用index作为key(diff算法)

Vue.js是一个数据驱动的框架，通过比对虚拟dom树上的新旧节点来更新DOM，将整数型索引作为v-for列表渲染的key，这会在某些场景下对diff算法的性能产生负面影响。

在Vue.js中如果我们用没有唯一标识的索引作为v-for循环渲染的key，可能会导致以下问题：

1. 内部状态丢失，导致数据混乱：在组件的状态更新时，一些原本没有改变的元素反倒被视为新元素去进行更新，则会将该元素的旧视图从DOM树中移除，再创建一个新的视图插入到DOM树中，导致不必要的渲染和性能问题。

2. 内存占用过高：如果在一个庞大的数据列表使用数组索引作为key，这会导致v-for被迫以每次渲染所有子组件的形式进行比对，当列表数据过大时，miniscule的性能优化也会对内存的消耗量变得越来越大，轻则造成页面性能问题，重则直接导致崩溃。

示例一：

组件1中的数据列表如下：

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Doe' },
  { id: 3, name: 'Dane' },
  { id: 4, name: 'Joe' }
]

在渲染组件1时，该数据列表将使用v-for进行渲染，此时如果我们将该列表的元素索引作为key，则会出现对应更新问题。

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

示例二：

组件2中的数据列表如下：

[
  { id: 100, name: 'John' },
  { id: 200, name: 'Doe' },
  { id: 300, name: 'Dane' },
  { id: 400, name: 'Joe' }
]

在渲染组件2时，该数据列表将使用v-for进行渲染，此时会对列表元素进行删除操作。

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

在上述两个示例中，如果我们使用索引作为key，会导致对应的更新问题，因此推荐使用具有唯一标识的属性值作为key。