vue在更新dom时会比较key值相同的元素内容是否发生改变,如果不变则不更新页面,这样可以使得尽可能减少页面的更新,提高性能。假如我渲染3个元素,不设置key值,即默认策略应该是标识为index,即0,1,2。假如我在第一个元素后加一个元素,则实际上原先的bc元素都被改值了,变成了xb。 假如我们在添加元素前把b这个item添...
使用index 作为key, 当点击删除第二条数据时,可以看到文本框的内容还是原本的第二条数据的内容。原因是虚拟DOM在比较元素的时候,因为DOM上的key等属性均未发生变化,所以其自身和内部的input均被复用了。 所以,在实际开发过程中不要把 index 作为 key 值。
然后按顺序取出第二项,根据标识“key=01”,在左边寻找也是“key=01”的一项,挨个对比文本节点和标签节点,发现两个节点都完全一样,所以直接复用之前的真实DOM。 以此类推,李四和王五都是直接复用左边的真实DOM。 四、总结 用index作为key可能会引发的问题:若对数据进行逆序添加、逆序删除等破坏顺序的操作时,会产生...
key:v-for 循环中绑定的 key 值 那么由此我们就可以知道:在 vue 中,通过 type + key 两个属性来判断 dom 是否相等。 如果条件满足(isSameVNodeType 返回 true),那么就不会重新渲染 dom,从而可以 提升性能 index 为什么会影响性能? 根据上面的内容,我们可以知道:在 type 不变的前提下,key 就决定了 dom 是...
使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略,列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素,我们在使用的使用经常会使用 index(即数组的下标)来作为 key,但其实这是不推荐的一种使用方法。举个例子 const list = [ { id...
01-v-for中的key 使用v-for更新已渲染的元素列表时,默认用就地复用策略; 列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; ...
在Vue中,我们经常会用到v-for指令来遍历数组或对象并渲染列表。而在使用v-for指令时,通常会需要给每个遍历的元素指定一个唯一的key值,以帮助Vue更高效地更新DOM。 在很多情况下,我们可能会倾向于使用index作为key值,因为index默认就是唯一的。但是,Vue官方不推荐使用index作为key值的原因主要有以下几点: ...
由于我们使用index作为Li的key,那么在differ比较的时候,index随着插入数据发生了变化,原来第二个li的index从 1 变成了 2 ,会被认为dom发生了变化,所以执行了更新过程。造成了不必要的性能开销,我们知道dom更新是特别消耗浏览器性能的,特别是如果for里面dom比较复杂,多层嵌套的情况下,对性能的开销还是不容小觑的。
v-for 中 key 值是否可以为 index 答案当然是不可以,举个例子,我们来看下面两个 vdom,从 num 值我们可以发现,新、旧两个 vdom 是两个顺序相反的数组生成的 vdom,安装正常的方式,应该是简单调换一下顺序,直接复用3个元素即可,而当我们以 index 作为 key 时,情况就不同了,由于 index 永远都是从 0 开始,...
经过上面的铺垫,我们终于可以好好的讲解为什么不能用index当做key值了。 key是在Vue 中用来标识虚拟 DOM 节点的特殊属性。它的主要作用是帮助 Vue 识别每个节点的唯一性,以便在进行虚拟 DOM 的更新时能够更加高效地重用和重新排序 DOM 元素。 来个场景理解一下。 xml复制代码<!DOCTYPE html> Document ...