都2024了,你不会还以为 index 不能做 key 吧?

vue3:key 可以使用用 index 了

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

先看看最新官网

cn.vuejs.org/guide/essen...

html 复制代码
<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:

定义一个数组

js 复制代码
  const a = [
    'A',
    'B',
    'C',
    'D'
  ]
  const list = reactive([...a])

设置几个按钮事件:

js 复制代码
  //删除一个数组元素
  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:

html 复制代码
  原生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:

html 复制代码
  <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也是可以的。
  • 如果还是不放心的话,使用啥都行。
相关推荐
华仔啊1 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
IT古董3 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
百思可瑞教育6 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e6 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
知识分享小能手10 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
朗迹 - 张伟10 小时前
Gin-Vue-Admin学习笔记
vue.js·学习·gin
古夕10 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
武昌库里写JAVA10 小时前
Java设计模式中的几种常用设计模式
vue.js·spring boot·sql·layui·课程设计
wow_DG12 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化