前言
diff算法代码太复杂?看图就完事了,其中细节没有过多解释,理清楚整体流程
- 整体核心就是想尽办法复用原来的dom
对比流程
旧头->新头,成功:
把当前新vnode节点真实dom属性指向旧的,新旧头指针向后移动一个单位
旧尾->新尾,成功:
把当前新vnode节点真实dom属性 指向旧的,新旧尾指针向前移动一个单位
旧头->新尾,成功:
把当前新vnode节点真实dom属性 指向旧的,尾指针向前,头指针向后移动,这时需要将当前指向的vnode所挂载的真实dom移动到 旧尾指针指向的真实dom后面
旧尾->新头
把当前新vnode节点真实dom属性 指向旧的,尾指针向前,头指针向后移动,将当前指向的vnode所挂载的真实dom移动到 旧头指针指向的真实dom前面
以上都不满足?
以当前新vnode节点为基准在旧vnode中查找,找到后 把当前新vnode节点真实dom属性 指向旧的 当前查找的vnode为 新头指针,则将找到的dom移动到旧头指针所指向的vnode所挂载的真实dom 的前面,反之亦然
还没找到可以复用的?
只好创建dom
图片字体有点小,放大网页看的更清楚,或者点击放大