使用index 作为key, 当点击删除第二条数据时,可以看到文本框的内容还是原本的第二条数据的内容。原因是虚拟DOM在比较元素的时候,因为DOM上的key等属性均未发生变化,所以其自身和内部的input均被复用了。 所以,在实际开发过程中不要把 index 作为 key 值。
按说这个问题并不复杂,所以该同学直接回答:“使用 index 作为 key 可能会导致渲染性能问题,特别是数据源使用了 unshift 将数据添加到头部时,会导致 index 被重新规划,从而导致重新渲染。” 然后面试官继续追问:“为什么 index 变化了就会导致 dom 重新渲染?它的渲染机制是什么?” 额... 吃了没有看过源码的亏,...
另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。 这里,也建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单。 为什么不能用index作为key? 举个栗子: <template>{{item.name}}<...
如果存在key,则通过createKeyToOldIdx索引是否存在; 如果不存在key,则遍历剩余 oldCh,获取index;=> findIdxInOld 判断是否索引到 index 【情况1】没有索引到,说明无法复用老的,直接新建; 【情况2】索引到了,如果是相同的节点,直接移动; 【情况3】索引到了,只是key相同,但节点发生了变化,直接新建; --- ...
在很多情况下,我们可能会倾向于使用index作为key值,因为index默认就是唯一的。但是,Vue官方不推荐使用index作为key值的原因主要有以下几点: 状态不稳定:在Vue的开发中,数据是动态变化的,当数据发生变化时,新的元素可能被添加到数组的开头、中间或末尾等位置,这样原本的index值就会发生改变,导致key与实际内容不匹配,可...
vue v-for中key的作用,使用index作为key会怎么样? 原理# 其主要的目的就是优化性能。vue在更新dom时会比较key值相同的元素内容是否发生改变,如果不变则不更新页面,这样可以使得尽可能减少页面的更新,提高性能。假如我渲染3个元素,不设置key值,即默认策略应该是标识为index,即0,1,2。假如我在第一个元素后加一个...
虚拟 DOM 是 React 开创的概念，被 Vue 等框架采用。它是一个描述 UI 的 JavaScript 对象，提供创建和比较节点的能力，通过 diff 算法优化渲染过程。vnode 作为虚拟 DOM 树的根节点，包含元素信息，支持灵活、声明式的 UI 构建。在使用 v-for 时，避免使用索引作为 key。这是因为，如果 key 为索引...
在Vue的学习中,我们经常听见或看见不推荐在v-for循环中使用index作为key的值,可是在写代码时,为了图方便我们还是经常使用,这样会带来什么后果呢,本篇文章从原理来一探究竟。 在说明为什么不能写:key="index"之前,我们还得先了解一些知识点。 虚拟DOM
如果此时 list 的 item 是 select 的选项,其中 Person3 是选中的,这个时候 Person2 被删除了,用 index 作为 key 就会变成是 Person4 选中的了,这就产生了bug。 如果使用唯一id作为key,删除 Person2 后,剩下的元素因为与 key 的关系没有发生变化,都不会被重新渲染,从而达到提升性能的目的。此时,list 的 ite...
{{item.name}} 上面这种是我们做项目中常用到的一种场景，因为不加 key、vue 现在直接报错,所以我使用 index 作为 key，下面列举两种常见的数据更新情况 1.在最后一条数据后再加一条数据 const list = [ { id: 1, name: 'test1', }, { id: 2, name: 'test2', }, { ...