都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也是可以的。
  • 如果还是不放心的话,使用啥都行。
相关推荐
王王碎冰冰6 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼7 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队8 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好8 小时前
pinia从定义到运用
前端·vue.js
代码小学僧8 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜9 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥12 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT14 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安14 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js