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

列表渲染v-for

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

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}
1
2
3
4
5

1、使用v-for遍历数组

  {{ item.message }} - {{ index }}

1
2
3

2、你可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

  {{ message }} {{ index }}

1
2
3

3、你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

  {{ message }} {{ index }}

1
2
3

4、你也可以使用 v-for 来遍历一个对象的所有属性

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}
1
2
3
4
5
6
7
8
9

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

  {{ index }}. {{ key }}: {{ value }}

1
2
3

5、v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1…n 的取值范围重复多次。

    {{ n }}

1
2
3

6、v-if和v-for的优先级

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

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

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

1
2
3
4
5

7、通过 key 管理状态

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

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

  

1
2
3

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

8、 index 作为 key 是不推荐使用的

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

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

同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。