校招刷题群
高效刷题 迎战校招
校招精选试题
近年面笔经面经群内分享
Java刷题群 前端刷题群 产品运营群
首页 > js语言和框架 > 基本语法-if\show
题目

Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?

解答

1 key的作用主要是为了高效的更新虚拟DOM

使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

它也可以用于强制替换元素/组件而不是重复使用它

2 当以数组的下标index作为key值时,其中一个元素(如增删改查)发生了变化就有可能导致所有元素的key值发生改变。

diff算法是比较同级之间的不同,以key来进行关联。当对数组进行下标的变换时,比如删除第一条数据,那么以后所有的Index都会发生改变,那么key自然也跟着全部发生改变,所以index作为key值是不稳定的,

这种不稳定性有可能导致性能的浪费 导致diff无法关联起上一次一样的数据。因此 能不用Index作为key就不要用Index。

C 11条回复 评论
偷看星星

上次做这道也错了……

发表于 2022-01-05 22:00:00
0 0
萬事勝意

key的作用主要是为了高效的更新虚拟DOM

发表于 2020-12-30 11:21:29
0 0
余择十二

1 key的作用主要是为了高效的更新虚拟DOM

发表于 2020-10-16 11:48:58
0 0
余择十二

1 key的作用主要是为了高效的更新虚拟DOM

发表于 2020-10-16 11:48:57
0 0
拱极星

key的作用是为了高效的更新虚拟dom

发表于 2020-09-25 13:25:06
0 0
拱极星

key的作用的为了高效更新虚拟dom。
若是以index为key,当对数组进行下标的变换时,比如删除第一条数据,那么以后所有的Index都会发生改变,那么key自然也跟着全部发生改变,所以index作为key值是不稳定的

发表于 2020-09-25 13:23:14
0 0
梓喵

Diff算法是比较同级之间的不同,以key来进行关联

发表于 2020-09-25 10:31:33
0 0
我就是八岁你打我呀_

为了高效更新虚拟DOM

发表于 2020-09-25 10:27:23
0 0
Akihi

删除元素会影响key值的变化

发表于 2020-09-25 10:12:58
0 0
梓喵

为了高效更新虚拟DOM

发表于 2020-09-25 10:12:02
0 0