在Vue中使用列表渲染v-for时为什么不要用index作为key？

飞熊 • 2023年12月19日下午8:52 • Vue • 阅读 140

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名，v-for 也支持使用可选的第二个参数表示当前项的位置索引。

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ item.message }} - {{ index }}
</li>

<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

<li v-for="({ message }, index) of items">
  {{ message }} {{ index }}
</li>

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
第二个参数表示属性名 (例如 key)：
第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

<div v-for="n in 10">
    {{ n }}
</div>

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

在vue2中，v-for的优先级高于v-if
在vue3中，v-if的优先级高于v-for

在外新包装一层再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

key 这个特殊的属性主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

性能问题：在 Vue中，使用索引作为 key 会导致 Vue 在跟踪每个项目的身份和数据变化时产生较大的性能开销。因为当列表项发生变化时，Vue 需要重新创建和渲染整个列表，而不是只更新单个元素。
数据一致性问题：如果使用索引作为 key，当数据项发生移动时（例如排序或过滤操作），索引也会发生改变。这可能会导致数据和视图不一致，因为 Vue 无法跟踪这些变化。
影响 Vue 的 diff 算法：Vue 的 diff 算法基于 key 进行。如果使用索引作为 key，当列表发生变化时，Vue 将无法正确地确定哪些元素发生了变化，哪些没有。这可能会导致不必要的渲染和性能问题。

为了避免这些问题，建议为每个列表项分配一个唯一的、不可变的 key 值。可以是每个项目的唯一标识符（例如数据库 ID），或者是一种可以唯一标识项目的方法（例如将项目添加到一个由字符串组成的字典中，将项目作为字典的键）。