vue3 虚拟dom与diff算法-JZTXT

diff算法

vue3 diff算法原码地址: https://github.com/vuejs/core

1. diff 算法主要是说renderer.ts中patchChildren这段代码逻辑,如下:

2. diff算法排序分为无key时diff算法排序逻辑和有key时diff算法排序逻辑
　2.1 无key时diff算法排序逻辑, 分为三步如下:
　　* 通过for循环patch重新渲染元素,来替换

　　* 删除
   * 新增
 2.2 有key时diff算法排序逻辑分为五步如下:
　 * 前序算法 前面元素与前面元素比较如 isSameVNodeType,如果不一样,跳出循环
   * 尾序算法 尾和尾比较,如果不一样,跳出循环
   * 新节点如果多出来就挂载(新增)
　 * 旧节点如果多出来就卸载(删除)
　 * 乱序

参考文章: https://xiaoman.blog.csdn.net/article/details/122778560?spm=1001.2014.3001.5502