Vue 中 key 值的作用是什么

一.原因

因为vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。所以当我们需要改变DOM元素时,有key属性和无key属性对虚拟DOM的操作方式是不一样的.

二.作用

1.无key属性: Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。

2.有key属性: 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

3.注意: 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误,所以有id就用id,无id就用index

三.解释

1.当需要在A和B之间加一个E节点时,有key时的diff算法:

 2.当需要在B和C之间加一个F，无key时的diff算法:

 四.总结:

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