手机版
网站地图
美文美图
最新动态
你好,欢迎访问
好美文阅读网
个性皮肤
搜索
网站首页
美文
文章
散文
日记
诗歌
小说
故事
句子
作文
签名
祝福语
情书
范文
读后感
文学百科
美文摘抄
节日文章
名家散文
网名大全
座右铭
口号大全
面试技巧
说说大全
阅读答案
诗词默写
流言蜚语
节日祝福
好句子
经典台词
谚语大全
亲情故事
友情故事
表白情书
工作报告
活动总结
心得体会
专题汇总
美文网首页
vue中使用v-for时为什么不能用index作为key
vue中使用v-for时为什么不能用index作为key
作者:
扶得一人醉如苏沐晨
| 来源:发表于
2022-02-25 09:36 被阅读0次
https://www.cnblogs.com/youhong/p/11327062.html
必须要用key,而且不能用index和random,
key是vue中vnodef的唯一标记,通过这个key,我们的df操作可以更准确,更快速
在diff算法中用tag和key来判断,是否是sameNode
可以减少渲染次数,提高渲染性能
要理解diff的过程,先要对virtual dom有个了解,这里简单介绍下。
我们都知道重绘和回流,回流会导致dom重新渲染,比较耗性能;而virtual dom就是用一个对象去代替dom对象,当有多次更新dom的动作时,不会立即更新dom,而是将变化保存到一个对象中,最终一次性将改变渲染出来。
diff原理
比较过程可以理解为一个层层递进的过程,
每一级都是一个vnode数组
,当比较其中一个vnode时,若children不一样,就会进入updateChildren函数,然后逐一比较children里的节点,对于children的children,再循环以上步骤。
在diff算法中用tag和key来判断,是否是sameNode
当不加key时,key都是undefined,默认相同,
diff算法就会就地复用
来进行比较
B复用A的结构,C复用B的结构,D复用C的结构,E复用D的结构,删除E;然后如果数据有变化,再更新数据
如果加上唯一识别的key(1,2,3,4,5)
以上,B、C、D、E全部可以复用,删除A即可从以上的对比可以看出,加上key可以最大化的利用节点,减少性能消耗
为什么不建议用index作为key
1)index作为key,其实就等于不加key
2)index作为key,只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出(这是vue官网的说明)
虽然加上了key,但key是就是当前的顺序索引值,此时sameNode(A,B)依然是为true,所以与不加key时一样,A复用B的结构并将数据更新为B。下面以一个demo来说明。
当我们删除一个对象数组的某一条对象后,数组动态改变,index也会改变,diff依然会采取就地复用的原则
总结
diff算法默认使用“就地复用”的策略,是一个首尾交叉对比的过程。
用index作为key和不加key是一样的,都采用“就地复用”的策略
“就地复用”的策略,只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
将与元素唯一对应的值作为key,可以最大化利用dom节点,提升性能
如果此时 list 的 item 是 select 的选项,其中 Person3 是选中的,这个时候 Person2 被删除了,用 index 作为 key 就会变成是 Person4 选中的了,这就产生了bug。
相关文章
网友评论
本文标题:
vue中使用v-for时为什么不能用index作为key
本文链接:
https://www.haomeiwen.com/subject/sarolrtx.html
延伸阅读
那年盛夏诗歌
环境监察队工作总结范文
优秀教师学习心得范文
华胥引的读后感300字
《Its red》教学反思范文
农资购销的合同范本
竞选中队委优秀演讲稿
辞金蹈海的成语解释
《世纪宝鼎》公开课教案设计
因为爱你,所以牵挂
今生今世红尘醉——美到
一个90后的内心独白
致已逝去的高中年华
深度阅读
您也可以注册成为美文阅读网的作者,发表您的原创作品、分享您的心情!
情人节
母亲节
重阳节
清明节
端午节
植树节
元宵节
妇女节
愚人节
圣诞节
父亲节
教师节
儿童节
劳动节
青年节
建军节
万圣节
平安夜
光棍节
中秋节
国庆节
感恩节
腊八节
更多话题
栏目导航
摄影
故事
互联网
读书
旅行
热点阅读
国足未来一门第一选择出炉!22岁小门连续3次入选名单,备受重视!
千奇百怪的战争导火索(6):一只耳
原来都是一个人(2022-02-23)
千奇百怪的战争导火索(5):一杯水
最高人民法院关于适用《中华人民共和国民法典》婚姻家庭编的解释(一
漫画大师手冢治虫的灵感来源,竟然是这些小时候听过的故事
追忆陈延年
起床障碍
千奇百怪的战争导火索(4):一句话
漠北雪/你的苦痛我的梦
网友评论