首页 > 其他分享 >vue的for循环不建议用index作为key

vue的for循环不建议用index作为key

时间:2024-08-29 21:54:06浏览次数:5  
标签:index vue key 渲染 标识 数组 id

我们页面总有一些相似的,我们想用循环渲染,根据对象数组结构进行渲染,这是不是很熟悉的场景。这时候我们需要有一个唯一的key绑定在循环渲染的元素上,一般情况下我们会用id,因为id是唯一的。然而有些页面要循环的数据(比如描述性的对象数组)没有id的时候,有的人会用index下标作为key,实际上这个是不建议的。比较推荐的做法是找出一个唯一标识(比如下标+内容/name拼接组合)

一、为什么不建议用Index

        1、绑定元素会变:当数组数据发生变化时,那么Vue无法准确地追踪每个子组件的身份。因为当一个数组比如前面加了元素item0,那么下标为 0的元素,它的内容是变化的,而不再是原来的item1了,下标绑定元素会变化的,并不是固定的。

       2、性能问题:当新的数据项插入到数组的开头或中间时,所有后续的子组件会被重新渲染,即使它们实际上并没有发生变化。这样会导致性能问题,因为Vue要重新创建和销毁大量的子组件。

        3、重新渲染:数组中的项发生顺序变化,index作为key的子组件也会随之变化,这可能导致不必要的重新渲染。

二、如何设置唯一标识

        1、id: 数组元素有唯一标识(如id等),那么使用其唯一标识

        2、使用index+name:  唯一性需要保证,以免出现重复的情况。另外,如果需要进行查找或者排序操作,可能需要考虑使用更合适的数据结构,以提高性能。

        3、添加唯一标识 :可以考虑通过计算属性或者修改数据源来为每一项添加一个唯一标识

标签:index,vue,key,渲染,标识,数组,id
From: https://blog.csdn.net/2401_85955297/article/details/141457098

相关文章

  • 全栈程序员 | 精通安卓、鸿蒙,小程序,Java、Vue.js、SpringBoot及更多技术
    我是一个全栈程序员,擅长多种开发技术,包括安卓开发、Java编程、Vue.js、SpringBoot以及小程序开发等。我在技术上有广泛的涉猎,并致力于将创新解决方案应用于实际项目中。无论是开发高性能的安卓应用,还是构建响应式网页、实现复杂的后端功能,我都能提供专业的技术支持和高质量的代......
  • 自动化测试:Monkey工具实践应用~
    在移动应用的自动化测试中,意外的用户操作和各种不可预见的场景往往是导致应用崩溃的主要原因。如何有效地模拟这些复杂场景,成为了测试工程师的一大挑战。而在这一过程中,Monkey工具凭借其随机化测试的独特优势,成为了许多团队的利器。那么,Monkey工具究竟是如何帮助测试工程师发现隐......
  • 计算机毕业设计django+vue大学校园生活交流平台【开题+论文+程序】
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和互联网的普及,大学生活日益丰富多彩,但同时也面临着信息交流与资源共享的难题。传统的线下公告板、口口相传等方式......
  • java毕业设计-基于springboot+vue的高校自习室预约系统设计和实现,基于springboot+vue
    文章目录前言演示视频项目架构和内容获取(文末获取)项目相关文件系统功能部分实现截图架构设计MVC的设计模式基于B/S的架构技术栈具体功能模块设计系统需求分析可行性分析系统测试为什么我?关于我我自己的网站项目开发案例前言博主介绍:✌️码农一枚,专注于大学生项目......
  • vue history 模式打包部署在域名的二级目录的配置指南
    1.vue-router路由的文件的配置,根据自己部署的二级目录填写123exportdefaultnewVueRouter({ mode:"history",  base:"/web",2.在vue.config.js配置文件(如果没有新建一个,项目根目录下) 注意:baseUrl从VueCLI3.3起已弃用,请使用publicPath。......
  • 解决创建VUE项目的时候执行npm install一直是loading状态
    创建VUE项目的时候执行命令npmcreatevue@latestnpminstall然后一直是处于loading状态配置npm代理,切换至国内镜像源先查看当前的镜像源:npmconfiggetregistry直接访问NPM官方仓库(registry.npmjs.org)可能速度较慢甚至不稳定。这时,切换至国内高速npm镜像源。​​​......
  • Mybatis-puls中select查询方法报错Can not find table primary key in Class
    1、项目参数springboot2.6.13jdk8Mybatis-Plus3.5.42、问题描述Mybatis-puls中select查询方法报错CannotfindtableprimarykeyinClass,org.apache.ibatis.binding.BindingException:Invalidboundstatement(notfound):com.example.dao.FLowerDao.selectById3、......
  • 基于Vue的MES生产制造执行系统
    系统包含:源码+论文所用技术:SpringBoot+Vue+SSM+Mybatis+Mysql免费提供给大家参考或者学习,获取资料请私聊我目录第1章绪论 11.1选题动因 11.2目的和意义 11.3论文结构安排 2第2章开发环境与技术 32.1Tomcat简介 32.2Eclipse简介 32.3Navicat简介 4......
  • 【mysql】SUBSTRING_INDEX 用法举例
    查询语句如下:SELECT 高工, SUBSTRING_INDEX(高工,'、',-1), --取右边第一个 SUBSTRING_INDEX(高工,'、',0), SUBSTRING_INDEX(高工,'、',1), --取左边一个(从左往右) SUBSTRING_INDEX(高工,'、',2), --取左边二个(从左往右) SUBSTRING_INDEX(高工,'、&......
  • 【vue3】探讨为什么ref()换为reactive()数据不再是响应式?
    原问题:本来想使用数组中的filter方法,原来用的是lettableData=ref([])然后发现Ref上不再filter属性,所以就换成了lettableData=reactive([])但是这样有了一个新问题就是:数据加载不出来了,代码如下//获取文章列表数据 lettableData=reactive([]) functiongetArt......