1、key的作⽤主要是为了⾼效的更新虚拟DOM。(此类原理可查看各类⽂档)2、防⽌不必要的bug出现。⼆、如果使⽤index作为key来使⽤,会出现bug情形。如果仅是为了⾼效更新DOM,可能⼈们不会在意,殊不知,使⽤index作为key,还会出现bug,如下情景会有bug。情形:当你有select 或者 checkbox 等...
但是,Vue官方不推荐使用index作为key值的原因主要有以下几点: 状态不稳定:在Vue的开发中,数据是动态变化的,当数据发生变化时,新的元素可能被添加到数组的开头、中间或末尾等位置,这样原本的index值就会发生改变,导致key与实际内容不匹配,可能会出现渲染错误或性能下降的问题。 列表重新排序时可能引发错误:当列表中的元...
因为随机数每次渲染时都会变化,按 diff 算法的比较规则,因 key 值的不同,就会视为节点发生了变化,而引发所有 v-for 节点的再次渲染。 key 不能使用 index key 使用 index 或无 key 时,在某些场景中会引发 diff 算法 的误判,导致页面错误的渲染。 比如包含输入框时,若 key 使用 index 左侧的内容重新排序了,...
v-for 中 key 值是否可以为 index 答案当然是不可以,举个例子,我们来看下面两个 vdom,从 num 值我们可以发现,新、旧两个 vdom 是两个顺序相反的数组生成的 vdom,安装正常的方式,应该是简单调换一下顺序,直接复用3个元素即可,而当我们以 index 作为 key 时,情况就不同了,由于 index 永远都是从 0 开始,...
虽然没有影响到使用,但报错还是得解决,查阅一番资料说,报错是因为key值可能重复了,于是了解了官方也推荐v-for中的key值不要使用index。 v-for 中的key值: 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的...
为什么不建议使用index? 在vue进行循环的数组或者对象中,使用了v-for进行dom元素的渲染。 当数组或对象中的值发生变化时,可能会使dom元素重新渲染。是否会重新渲染和我们设置的key属性对应的值有关 合理的设置key属性的值可以有效的提高页面的的更新效率 首先,vue使用了diff算法来进行dom元素的更新,...
vue中循环数组对象不建议用index作为v-for的key,可能初学者也都知道这个事实,但是具体是什么原因,会造成什么样的后果呢? 我们今天就从其原理:虚拟dom的differ算法vdom-differ说起。 当我们修改了数据,数据的变动会触发订阅该数据变化的dom对象的更新,这个过程大致可分为三个阶段: ...
假如,我们使用 index 作为 key,同时使用 unshift 方法为数组添加了一个新的元素,那么所有的 index 都会发生变化,从而导致:isSameVNodeType 返回 false,即:所有的 dom 全部重新渲染 从而影响性能。 Hello,大家好,我是 Sunday。 最近有个同学在小红书三面的时候遇到了一个面试题:“v-for循环,为什么不建议使用index...
建议不要使用数组的`index`作为`v-for`指令的`key`属性值,因为它可能会导致一些问题:1. 在数组中...