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

加了这个参数,循环的时候就不会重复渲染,这个:key具体怎么用的?只是在循环的时候用到吗?
30
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2021-10-19 17:13:06
同学你好,对于你的问题解答如下:
1、 因为在列表循环时添加了key值,给元素设置了唯一标识,所以才会减少重复渲染,提升性能, 这里涉及到vue底层实现的原理机制了,为了方便同学可以更直观的理解,老师举了另一个示例,具体结合如下分析理解:
循环列表渲染时,没有设置key值,如下:

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

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


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

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

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

2、是的,一般是在循环列表时绑定key值。
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星