Vue前端面试题总结(三十二 )Vue Key的作用 详解

Key值的作用

key 值:用于管理可复用的元素。因为 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染

其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。
要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了 vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法
当页面的数据发生变化时,Diff算法只会比较同一层级的

节点: 如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。
如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新abcde的例子
这个时候我们就需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点

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

猜你喜欢

转载自blog.csdn.net/Rick_and_mode/article/details/108654809