v-for 中 key 值是否可以为 index 答案当然是不可以,举个例子,我们来看下面两个 vdom,从 num 值我们可以发现,新、旧两个 vdom 是两个顺序相反的数组生成的 vdom,安装正常的方式,应该是简单调换一下顺序,直接复用3个元素即可,而当我们以 index 作为 key 时,情况就不同了,由于 index 永远都是从 0 开始,...
v-for 中 key 值是否可以为 index 答案当然是不可以,举个例子,我们来看下面两个 vdom,从 num 值我们可以发现,新、旧两个 vdom 是两个顺序相反的数组生成的 vdom,安装正常的方式,应该是简单调换一下顺序,直接复用3个元素即可,而当我们以 index 作为 key 时,情况就不同了,由于 index 永远都是从 0 开始,...
如果存在key,则通过createKeyToOldIdx索引是否存在; 如果不存在key,则遍历剩余 oldCh,获取index;=> findIdxInOld 判断是否索引到 index 【情况1】没有索引到,说明无法复用老的,直接新建; 【情况2】索引到了,如果是相同的节点,直接移动; 【情况3】索引到了,只是key相同,但节点发生了变化,直接新建; --- ...
所以一句话,key 的作用主要是为了高效的更新虚拟 DOM。另外 Vue 中在使用相同标签名元素的过渡切换时,也会使用到 key 属性,其目的也是为了让 Vue 可以区分它们,否则 vue 只会替换其内部属性而不会触发过渡效果。 4、不能用 index 作为 key 为什么不能用 index 作为 key,如果你用 index 作为 key,那么在删除...
2、有key:通过移动节点复用节点来更新DOM 3、无key:会通过删除新建节点来更新DOM 4、使用下标index作为Key:数组的操作删除新增排序,会造成BUG diff diff算法的处理方法 对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图: 当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也...
在Vue中,我们经常会用到v-for指令来遍历数组或对象并渲染列表。而在使用v-for指令时,通常会需要给每个遍历的元素指定一个唯一的key值,以帮助Vue更高效地更新DOM。 在很多情况下,我们可能会倾向于使用index作为key值,因为index默认就是唯一的。但是,Vue官方不推荐使用index作为key值的原因主要有以下几点: ...
目录 收起 key 的必要性 vnode(虚拟DOM) diff 算法 总结 问题:为什么不建议在 v-for 指令中使用 index 作为 key? <!-- 内容 --> key 的必要性 Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时,Vue 不会随之移动 DOM 元素的顺序,而是就地更新每个元素,确...
v-for 中 key 值是否可以为 index 答案当然是不可以,举个例子,我们来看下面两个 vdom,从 num 值我们可以发现,新、旧两个 vdom 是两个顺序相反的数组生成的 vdom,安装正常的方式,应该是简单调换一下顺序,直接复用3个元素即可,而当我们以 index 作为 key 时,情况就不同了,由于 index 永远都是从 0 开始,...
在Vue的学习中，我们经常听见或看见不推荐在v-for循环中使用index作为key的值，可是在写代码时，为了图...
在V-for中使用的索引是只读的:Vue在V-for循环中提供了一个特殊的变量$index,用于表示当前循环的索引。然而,这个$index是只读的,不能进行修改。如果我们将$index作为key来修改它的值,会导致出现预料之外的错误。 不利于可维护性和扩展性:使用索引作为key会让代码更难以维护和理解。如果在将来需要对列表进行更新或修...