前言
diff算法主要是三步:生成虚拟节点、将新旧虚拟节点对比(核心)、新节点替换旧节点。本篇文章主要讲如何实现patch函数中最后一部分,也是最核心的一部分。
介绍
前面已经把,不同节点的情况和相同节点且旧节点没有子节点情况讲解了,这篇文章来介绍以下,相同节点情况下,旧虚拟虚拟节点有子节点并且新虚拟节点也有子节点的情况,需要按照规定的比较顺序比较,比较的规则如下:
为了方便书写,我会进行简写:
旧前:旧虚拟节点的头部指针
旧后:旧虚拟节点的尾部指针
新前:新虚拟节点的头部指针
新前:新虚拟节点的头部指针
![](https://i-blog.csdnimg.cn/blog_migrate/88a6616b5d7aab2e1d5c190fc995cd8e.png)
比较会有六种情况:
比较永远都是从第一种情况开始匹配!!!
1.旧前 – 新前
2.旧后 – 新后
3.旧前 – 新后
4.旧后 – 新前
5.查找
6.创建或者删除
情况一:旧前 – 新前
情况一匹配成功,此时旧前和新前的指针会++
![](https://i-blog.csdnimg.cn/blog_migrate/0bd5bde47aa0d847bf89931165f298b4.png)
情况二:旧后 – 新后
情况二匹配成功,此时旧后和新后的指针会–
![](https://i-blog.csdnimg.cn/blog_migrate/c05e9ea5045ee21c86ce7cd179a6f0ff.png)
情况三:旧前 – 新后
情况二匹配成功,此时旧前会++和新后的指针会–
![](https://i-blog.csdnimg.cn/blog_migrate/fe69046678bc57cda955dd123fa4927a.png)
情况四:旧后 – 新前
情况二匹配成功,此时旧后会–和新前的指针会++
![](https://i-blog.csdnimg.cn/blog_migrate/71a716323ef350fcbabdfeff49c409b8.png)
情况五:查找
新节点添加到页面,并且如果旧节点有新节点的值,那么旧节点值赋值为undefined
实现
首先,我们