为啥:key=“index”能提升性能?

为啥:key=“index”能提升性能?

https://img1.sycdn.imooc.com//climg/616e89a8098d1a5307480405.jpg

加了这个参数,循环的时候就不会重复渲染,这个:key具体怎么用的?只是在循环的时候用到吗?


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2021-10-19 17:13:06

同学你好,对于你的问题解答如下:

1、 因为在列表循环时添加了key值,给元素设置了唯一标识,所以才会减少重复渲染,提升性能, 这里涉及到vue底层实现的原理机制了,为了方便同学可以更直观的理解,老师举了另一个示例,具体结合如下分析理解:

循环列表渲染时,没有设置key值,如下:

http://img1.sycdn.imooc.com//climg/6126fcad09c5d01907000592.jpg

当选中A之后,再新添加一个元素,就变成新添加的元素被选中了,如下:

http://img1.sycdn.imooc.com//climg/6126fd960aece2dd05010455.jpg

如果添加key标识之后,选中A,添加内容后,依然选中的是A,如下:

http://img1.sycdn.imooc.com//climg/6126fdda09edda5d05890270.jpg

http://img1.sycdn.imooc.com//climg/6126fe6b0a4fdccc05010455.jpg

这个现象是与vue自身的机制有关,即:Diff算法。因为涉及到底层原理,平时用不上,老师给你简单讲解一下,同学作为了解就行:

当a,b,c中间想要插入一个z

http://img1.sycdn.imooc.com//climg/5ff58c1009a0e7b802840173.jpg

diff算法默认会按照如下去更新,即:b更新成z ,c更新成b,最后插入一个c 。

http://img1.sycdn.imooc.com//climg/5ff58c2b09f4123200000000.jpg

因为没有标识向上面这样的更新会很麻烦,所以这个时候key体现了很大的作用,给每一个元素做个标记。这样diff算法可以正确识别每一个元素,从而正常的更新数据,另外,对于已标记的元素,没有发生改变时,可以直接复用,减少重复渲染。

http://img1.sycdn.imooc.com//climg/5ff58c4009235fbe03160186.jpg

2、是的,一般是在循环列表时绑定key值。

祝学习愉快~

  • 清夏_ #1

    老师,这里绑定这个 key 值,名字怎么去定义,,像课上老师说的  index item 有什么语义吗,,还是只要唯一就行了,可以自定义呢

    2022-11-23 16:45:14
  • 同学你好,key的值不需要去定义,直接使用循环中带的即可,如:key="index"这里的index就是v-for="(index,item)" in ListArray 中的index下标。或者item.id则就是item中的id。只需要是唯一的就可以了。不需要自定义。

    祝学习愉快!

    2022-11-23 17:13:23
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师