如果存在key,则通过 createKeyToOldIdx 索引是否存在; 如果不存在key,则遍历剩余 oldCh,获取index;=> findIdxInOld 7. 判断是否索引到 index【情况1】没有索引到,说明无法复用老的,直接新建;【情况2】索引到了,如果是相同的节点,直接移动;【情况3】索引到了,只是key相同,但节点发生了变化,直接新建; --- ...
这就是用index作为key的弊端所在了,索引是基于数组的顺序,而不是基于每个项的内容。如果列表中的项目发生了变化,例如向列表头部或者中间添加或删除了某个项目,这会导致相同的索引对应着不同的项,这样就会破坏Vue的虚拟DOM Diff算法,使得整个列表被浏览器重新渲染,性能大大的降低了...
最好的办法是使用数组中不会变化的那一项作为 key 值，对应到项目中，即每条数据都有一个唯一的 id，来标识这条数据的唯一性，使用 id 作为 key 值，我们再来对比一下向中间插入一条数据，此时会怎么去渲染：之前的数据 之后的数据key: 1 id: 1 index: 0 name: test1 key: 1 id: 1 index: 0...
vue在更新dom时会比较key值相同的元素内容是否发生改变,如果不变则不更新页面,这样可以使得尽可能减少页面的更新,提高性能。假如我渲染3个元素,不设置key值,即默认策略应该是标识为index,即0,1,2。假如我在第一个元素后加一个元素,则实际上原先的bc元素都被改值了,变成了xb。 假如我们在添加元素前把b这个item添...
v-for 一定要绑定key值吗?为什么不建议使用index? 在vue进行循环的数组或者对象中,使用了v-for进行dom元素的渲染。 当数组或对象中的值发生变化时,可能会使dom元素重新渲染。是否会重新渲染和我们设置的key属性对应的值有关 合理的设置key属性的值可以有效的提高页面的的更新效率...
如果不存在key,则遍历剩余 oldCh,获取index;=> findIdxInOld 判断是否索引到 index 【情况1】没有索引到,说明无法复用老的,直接新建; 【情况2】索引到了,如果是相同的节点,直接移动; 【情况3】索引到了,只是key相同,但节点发生了变化,直接新建;
假如,我们使用 index 作为 key,同时使用 unshift 方法为数组添加了一个新的元素,那么所有的 index 都会发生变化,从而导致:isSameVNodeType 返回 false,即:所有的 dom 全部重新渲染 从而影响性能。 Hello,大家好,我是 Sunday。 最近有个同学在小红书三面的时候遇到了一个面试题:“v-for循环,为什么不建议使用index...
虚拟DOM是一种用于优化渲染性能的技术。Vue在渲染时，会先生成一个虚拟DOM树，然后通过比较旧的和新的虚拟DOM树，找到它们之间的差异，仅更新这些差异部分，而不是整个DOM树。这样可以显著提升渲染效率。当我们在v-for循环中使用index作为key值时，我们实际上是用一个基于数组位置的值来标识每个元素。这种...
经过上面的铺垫,我们终于可以好好的讲解为什么不能用index当做key值了。 key是在Vue 中用来标识虚拟 DOM 节点的特殊属性。它的主要作用是帮助 Vue 识别每个节点的唯一性,以便在进行虚拟 DOM 的更新时能够更加高效地重用和重新排序 DOM 元素。 来个场景理解一下。 xml复制代码<!DOCTYPE html> Document ...
简介:Vue - v-for 中为什么不能用 index 作为 key 这是一篇脱坑日记,在做项目的过程中,我使用了 v-for 渲染子组件时,并将 index 绑定给了 key,这一行为导致删除操作会误删子组件,实际上删除的组件并不是你预期的那个。而且我在排查错误的过程中打印 log 的数据信息均正常,唯独在执行删除操作时出现异常。