Vue官方建议我们在使用v-for时,给对应的元素和属性加上一个key属性。如果没有使用key属性,将会给我们一个警告。表面上看起来没什么影响,但是关系到项目的性能,所以为了让项目更高效,我们不得不使用key属性。Vue的虚拟DOM机制可以让我们在不操作DOM的情况下重新渲染页面,只需要操作数据;虚拟DOM机制的原理是基于Diff算法。如下图,我想在B和C之间插入一个节点,FDiff算法的插入机制如下图所示,即把原来的C更新为F,更新D为C,更新E到D,最后插入E。在没有指定key的情况下,这就是“傻瓜式位移”实现更新。如果我们给他指定一个唯一的标识键,他就可以正确地识别节点,并根据唯一标识键找到对应的位置。需要在相应的位置进行更新。不用“傻瓜式位移”来一一比较。因此,key的作用主要是高效更新虚拟DOM。
