vue3：key 可以使用用 index 了

本来以为大家都知道这事了，结果，看了最新的一个文章以及评论，发现一些人还以为 index 不能作为 key。这…尤雨溪是白做优化了。

先看看最新官网

cn.vuejs.org/guide/essen…

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

有没有发现不一样的地方？居然没有key了！

再来看看关于 key 的说明——通过 key 管理状态：

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

动手试试

官网这么写了就一定没有问题吗？不要迷信官网，要自己动手试试才行,我们先做个简单的例子。

js：

定义一个数组

  const a = [
    'A',
    'B',
    'C',
    'D'
  ]
  const list = reactive([...a])

设置几个按钮事件：

  //删除一个数组元素
  const del1 = (index: number) => {
    list.splice(index, 1)
  }
  let index = 0
  // 重新设置数组内容
  const reset1 = () => {
    index = 0
    list.length = 0
    list.push(...a)
  }
  // 在开头添加一个元素
  const addNewA = () => {
    list.unshift('aa' + index++)
  }
  // 在结尾添加一个元素
  const addNewZ = () => {
    list.push('zzz' + index++)
  }
  // 交换位置
  const update2 = () => {
    const tmp = list.splice(2,1)
    list.splice(1,0, tmp[0])
  } 

不用 key

我们对原生dom、template、自定义组件使用v-for进行测试，先按照官网不设置key：

  原生dom：
  <div v-for="(item, index) in list">
    {{ index }}：{{ item }}
    <button @click="del1(index)">X</button>
  </div>
  <hr>
  template：<br>
  <template v-for="(item, index) of list" >
    {{ index }}：{{ item }}
    <button @click="del1(index)">X</button>
    <br>
  </template>
  <hr>
  <key-son
    v-for="(item) in list"
    :name="item"
  >
  </key-son>

index 作为 key

然后再使用 index 作为 key：

  <div
    v-for="(item, index) in list"
    :key="index"
  >
    {{ index }}：{{ item }}
    <button @click="del1(index)">X</button>
  </div>
  <hr>
、<template
    v-for="(item, index) of list"
    :key="index"
  >
    {{ index }}：{{ item }}
    <button @click="del1(index)">X</button>
    <br>
  </template>
  <hr>
  <key-son
    v-for="(item) in list"
    :key="index"
    :name="item"
  >
  </key-son>

测试

经过反复测试，完全没有问题。不截图了，反正也不好看。

小结

• 一般情况下完全可以不设置key，这样效率更高。
• 如果要使用key的话，index也是可以的。
• 如果还是不放心的话，使用啥都行。