v-for key 作用

v-for key 作用

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；

而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

Vue在更新虚拟DOM时，会对key进行判断。

PatchFlags.KEYED_FRAGMEN：调用 patchKeyedChildren 方法

PatchFlags.UNKEYED_FRAGMENT：调用 patchUnkeyedChildren 方法

patchKeyedChildren：

1、从头部开始遍历，遇到相同的节点就继续，遇到不同的节点就跳出循环。

2、从尾部开始遍历，遇到相同的节点就继续，遇到不同的节点就跳出循环。

3、如果最后更新的节点多，添加新节点。

4、如果旧节点更多，移除旧节点。

5、如果中间存在无序额位置队列，使用key建立索引图，最大程度使用就节点。

patchUnkeyedChildren：

1、获取新旧节点长度进行对比，取出小的一个。

2、从首位进行遍历比较，当发现存在不同跳出循环。

3、如果旧节点长度大于新节点，移除剩余节点。

4、如果新节点长度大于旧节点，创建新节点。