VUE3深入源码了解key

1. 为什么要使用key??

Vue官网中对此有相关介绍：

key 特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。

延申：什么是VNodes?

VNodes即虚拟节点，是存在于内存当中一个的JavaScript的对象。Vue中模板引擎会先将每一个标签最后都会渲染成一个个Vnode，组成VNode Tree，再转成真实DOM（为了多平台的适配） 。

如：

为什么需要这个key属性呢？

这个其实和Vue内部也使用了虚拟DOM有关系（和小程序、React很相似）。

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E。

所以我们需要使用key来给每个节点做一个唯一标识，这样做的好处：

0. Diff算法就可以正确的识别此节点
1. 找到正确的位置区插入新的节点。

图右是加了key标识符

所以一句话，key的作用主要是为了高效的更新虚拟DOM。

2. Vue3源码深入

Vue针对开发者是否使用了key进行判断:

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

2.而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。（调用patchKeyedChildren方法（））。 学习自coderwhy老师笔记

Vue3源码：

3. patchUnkeyedChildren方法

4. patchKeyedChildren方法

1.当我们在有key的情况下添加或删除节点时，首先会从头部进行遍历，如果旧节点的key和新节点的key 不相同则退出while。

2. 接着从尾部开始遍历，使用方法与1相同,比较后遇到key与type不相同的节点 退出

3.如果旧的节点遍历完毕，还有新的节点 则挂载新节点

4. 如果新的节点遍历完毕，仍然有旧的节点 则移除旧节点

5.如果新旧结点1 2遍历停止后，中间不止一个节点或者中间的节点顺序不同,Vue尽可能的减少更新，所以会对中间部分再次进行一个遍历，新增或移除节点