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

Key值的作用

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

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

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

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