v-for中的key是什么作用？

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。

这个key属性的作用有什么用？

• key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes
• 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
• 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素

Vue中对于列表的更新究竟是如何操作的？

• Vue事实上会对于有key和没有key会调用两个不同的方法
• 有key，那么就使用patchKeyedChildren方法
• 没有key，那么久使用patchUnkeyedChildren方法

源码截图：

patchUnkeyedChildren方法

没有key的情况相对简单，先看代码注释

• 在没有key的情况下，Vue会对新旧VNode依次进行比较，对比Node的类型、内容等信息，当发现有两个Node不同时，变回使用patch方法进行更新
• 如果旧的VNodes的长度大于新的VNodes的长度，会直接移除旧的VNodes
• 反之则创建新的VNodes

patchKeyedChildren方法

patchKeyedChildren方法相对复杂，一共分为五步，看代码注释：