西安公司网站设计费用,wordpress企业站主题哪个好,中华网,wordpress版本降级导语 最近碰到部分业务场景#xff0c;代码逻辑需要了解数组变更后#xff0c;具体变更了哪一些元素#xff0c;以及变更的位置..。于是仔细研究并覆写了一遍针对数组变化的diff算法#xff0c;在这里做下diff算法的逻辑分享源码解读一.介绍前的准备… 导语 最近碰到部分业务场景代码逻辑需要了解数组变更后具体变更了哪一些元素以及变更的位置..。于是仔细研究并覆写了一遍针对数组变化的diff算法在这里做下diff算法的逻辑分享源码解读一.介绍前的准备工作我们先了解diff方法的运行规则和前提方法.1.虚拟node进行深度优先 同级对比深度优先:同级对比如上面图所示每次vnode都是执行同级对比(对应dom同一个父元素)代码逻辑如下图2.简单判断sameVnode函数用来进行判断是否是同一个vnode元素。源代码如图所示这里有两个重要元素key : 开发者定义的”:key”sel: 元素tagName元素id元素classsel的定义源码如下vNode构建函数3.构建索引逻辑如图二.如何处理元素尽量不新增/删除dom如图下所示:如果是相同vnode源码如下三.开始比较1.首先会进行时间复杂度 O(n)的while循环循环条件为 遍历旧节点数组遍历新节点数组谁先遍历完循环就结束 源码如下图:在每次的循环过程中会有两大类判断方法1-1.首尾比较 首尾序号逻辑如图上所示首先在循环遍历前 标记好新旧节点数组的开始位置和结束位置的序号oldStartIdx、oldEndIdx、newStartIdx、newEndIdx其次在循环遍历的过程中采用 首首比较尾尾比较首尾比较源码如下如果数据为图上所示那么根据首尾比较方法会有如下图所示结果最终全部执行了更新操作1-2.索引比较 -- 最坏情况,这里的时间复杂度也是O(n)即整个算法复杂度O(n)O(n)每次遍历的过程中可能存在新数组节点新增/旧数组节点删除那么前后对比就满足不了条件。这里逻辑会进入索引比较;比如这种情况那么循环中会执行一遍 创建旧数组的索引对象。那么从创建到比较的整个逻辑图如下这里的源码如下:1-2.1 当旧节点不存在新增的节点时,进行当前oldStartIdx位置的添加:源码如下:1-2.2 当旧数组存在节点那么进行位置移动:源码1.3 当节点遍历完之后会存在两种情况“新数组已经遍历完但旧数组没有遍历完成” || “旧数组遍历完成但新数组没有遍历完成”.故源代码的判断如下:1.3.1 旧数组没有循环完成旧数组没有循环完成的效果如下图所示这里注意一个点我们每次的节点更新会移动序号即使被删除的节点不在一块 最终也会被 首尾比较算法 摞在一块 即 (oldStartIdx~oldEndIdx)。上图所示更加明显一些。源码在这里就进行批量删除1.3.2 新数组没有循环完成:效果如下图所示:经过 前后对比索引 的过滤后只会存在 新.末尾节点!旧节点 及之前的连续的新节点(!旧节点);所以这里也被 摞在一块 即 (newStartIdx~newEndIdx)源码如下这样整个diff的对比算法就已经走完了。所以核心就是前后对比索引四.关键点关键点大概如下五.vue3.0对于diff比较前的优化vue3.0针对无脑patchVnode进行了过滤 -- 静态类型Vnode老版的源码:这里我们再重复下vue2.x系列的对比更新逻辑:新版的vue3.0增加了 静态类型Vnode如果是静态类型的vnode 那么直接跳过更新修改新节点引用即可:备注:comment类型 目前翻到它的源码也只是更改引用源码作者加上了一行注释这里再多插一句fragment 碎片类型 为新增的vnode类型 即vue3.0的过滤判断源码如下:
