问题:为什么不建议在 v-for 指令中使用 index 作为 key? <!-- 内容 --> key 的必要性 Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时,Vue 不会随之移动 DOM 元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。 为了避免上述情况,可以为每个...
<el-menu-item :index="''+index" v-for="(subItem,subindex) in item.subMenuList"> {{index}}-{{subItem.subMenuName}}</el-menu-item> 将 :index 的制改为 ''+index，一定是单引号 '' ，子组件获取的到的就变成字符串 "0,""1"...，将字符串 "0" 变成整数 +"0" 即可。
按说这个问题并不复杂,所以该同学直接回答:“使用 index 作为 key 可能会导致渲染性能问题,特别是数据源使用了 unshift 将数据添加到头部时,会导致 index 被重新规划,从而导致重新渲染。” 然后面试官继续追问:“为什么 index 变化了就会导致 dom 重新渲染?它的渲染机制是什么?” 额... 吃了没有看过源码的亏,...
<el-submenu :index="index" v-for="(item,index) in menuList"> <el-menu-item :index="index" v-for="(subItem,subindex) in item.subMenuList"> {{index}}-{{subItem.subMenuName}}</el-menu-item> </el-submenu> 发现子组件获取到的index一直都是undefined。 修改办法: <el-menu-item :index...
为什么有时候用index作为key会出错 带着这个疑问,结合各种博客和源码,终于有了点眉目。 virtual dom 要理解diff的过程,先要对virtual dom有个了解,这里简单介绍下。 【作用】 我们都知道重绘和回流,回流会导致dom重新渲染,比较耗性能;而virtual dom就是用一个对象去代替dom对象,当有多次更新dom的动作时,不会立即更...
问题:为什么不建议在 v-for 指令中使用 index 作为 key? 代码语言:javascript 复制 <!--内容--> key 的必要性 Vue 默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时,Vue 不会随之移动 DOM 元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。 为了避免上述...
再比如当向数组中指定位置插入一个新元素后,因为这时候会重新更新index索引,对应着后面的虚拟DOM的key值全部更新了,这个时候还是会做不必要的更新,就像没有加key一样,因此index虽然能够解决key不冲突的问题,但是并不能解决复用的情况。如果是静态数据,用索引号index做key值是没有问题的。标签名一样,key一样这时候就...
项目中我使用v-for循环,key值绑定了index,一般情况下是没有啥问题,但我的需求是,v-for绑定的数组会动态的修改其中一个项,新增或删除一个项,此时我的控制台给我报了一个错:vue控制台报错Duplicate keys detected: 'xxxx'. This may cause an update error. ...
这是一篇脱坑日记,在做项目的过程中,我使用了 v-for 渲染子组件时,并将 index 绑定给了 key,这一行为导致删除操作会误删子组件,实际上删除的组件并不是你预期的那个。而且我在排查错误的过程中打印 log 的数据信息均正常,唯独在执行删除操作时出现异常。
状态不稳定:在Vue的开发中,数据是动态变化的,当数据发生变化时,新的元素可能被添加到数组的开头、中间或末尾等位置,这样原本的index值就会发生改变,导致key与实际内容不匹配,可能会出现渲染错误或性能下降的问题。 列表重新排序时可能引发错误:当列表中的元素需要重新排序时,如果我们使用index作为key值,Vue会认为只是简...