Javascript

vue2.0源码——diff算法

本文主要是介绍vue2.0源码——diff算法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

题目:vue2.0源码——diff算法

一、diff概述

1.为什么vue需要diff算法
我们都知道vue的diff是为了更新DOM去服务的,那更新DOM是在什么样的场景下发生的呢?

想象一下,你的组件中一个状态发生改变了,按照我们之前讲的,会触发响应式数据的setter,一旦触发setter,就会调用相应watcher的get方法,这个get方法中会执行this.getter,而这个getter就是相应的渲染函数,这个渲染函数会生成一个全新的带有最新数据的虚拟DOM。

以上都是我之前文章的内容哦,如果不太熟悉,请看看之前的文章。

2.问题
如果生成了一个全新的DOM,我们可以有两种方式,一种是我们根据这个新的虚拟DOM,使用createEle()重新创建一个新的真实DOM,然后对之前的DOM,进行替换;另外一种方式是我们找到旧的虚拟DOM,和新的虚拟DOM之间的不同,然后只更新变化的那一部分。

相信不用我过多解释,我们都应该想到,vue肯定采取的第二种方式,因为如果每次状态的变化我们需要生成一个全新的DOM的话,那就会造成大量的不必要的,实际并未变化的DOM,从而造成大量的性能的浪费。

因为我们需要使用一种能够帮助我们找到新旧dom不同的算法,而这正是我们今天要仔细研究的算法。

3.找到位置
找到vue.js源码中的 __patch__方法。
在这里插入图片描述
因为从上一篇文章中,我介绍到了,每一次渲染watcher的使用都会调用一个getter,内部封装的是叫做 _update(_render() , vm)这个方法,而_update更新操作中伴随了一次__patch__,这个patch实际上就是diff新旧DOM并且真正更新DOM或创建DOM的过程。

小结:从这个过程中我们其实可以慢慢可以了解到vue其实在做框架设计的时候,都是分层去设计的,也就是说,编译是为了生成抽象语法树,它负责把字符串的模板构建成可操作的抽象语法树;而渲染函数是为了专门用来创建虚拟DOM的,并这个过程中保持获取最新值;然后diff算法做最终的拦截,帮助vue进行最小量的更新,大大节约vue对于性能的消耗。

可以看到我们的__patch__方法接受新旧两个虚拟DOM作为参数。
在这里插入图片描述
而__patch__实际上是这个patch方法。
在这里插入图片描述
patch方法是由createPatchFunction这个函数返回的,所以这个函数是个高阶函数,返回一个函数。接下来我们就来关注这个函数做了什么。

二、源码分析

diff算法的所有内容几乎都在函数函数里面。但这个函数实在是太大了有近一千多行,我用图把其中的结构画出来。
在这里插入图片描述
这个craetePatchFunction会接受一个参数backend,调用时会穿进去一个对象,这个对象中保存着所有的创建DOM的方法,供diff使用。
在这里插入图片描述
传进去的就是这个对象。在这里插入图片描述
在这里插入图片描述
我们重点是看这两个函数。updateChildren,和patchVNode。就这么说吧,这两个函数就是diff函数的核心算法。
在这里插入图片描述
在返回回来的patch中,我们可以看到。他会首先做判空的处理,如果旧的虚拟DOM如果不存在,那么就根据新的虚拟DOM进行创建,这是为了使得第一次渲染DOM做的准备,因为第一次只有新的虚拟DOM,而没有旧的DOM,但diff存在的意义肯定是有虚拟DOM,因此我们可以直接看到后面,在进行后面的比较时,只有属于同一个节点,才会进行对于,如果不属于同一个节点,就直接进行暴力更新,这个diff的一个原则。想象一下如果新旧虚拟DOM的两个节点,如果根节点都发生了变化,那本质上diff会将整个新虚拟DOM进行重新渲染。

而判断两个虚拟DOM节点是否一样的标准就是下面这个函数。
在这里插入图片描述
至少要保证a节点的key和b节点的key是一样的,如果没有key的话,那么两个都是undefined也属于是相等的。asyncFactory在大多数情况下都是undefined,可以不用管,tag保持一样,data都有值,如果是input控件,在判断一样是否属于同一种类型的控件。只要保持这几个为true那么这个节点就属于同一个节点,就可以进行详细的diff而不用去重新创建。这个是合理的。接下来会进入patchVnode这个方法。

在这里插入图片描述
在这里我会使用断点测试一下!
在这里插入图片描述
在这里我们进入patchVnode方法进入看一下。
在这里插入图片描述
继续往下走
在这里插入图片描述
在这里vue做了一个优化的动作,就是虚拟DOM上的节点也分为静态节点和动态的节点,所谓静态节点就是那些永远不会发生变化的,没有任何指令操作,也没有绑定任何变量的节点,这样的节点在生成渲染函数的时候就会进行一个标记,所有标记了这些静态标记的点都会在这里判断,如果新旧虚拟DOM都是静态节点并且Key相同,就会直接返回,也就意味着这里的静态DOM并不会被更新,也不会执行下面的逻辑,从而达到优化性能的目的,因此我们再次验证的,所谓的diff本质上来讲其实最终一定是为了最小量更新。
在这里插入图片描述
在这里会对两个节点的属性进行同步,比如a和b节点他们的标签名一样,key也一样,可能某个属性不一样我们只需要让a的真实DOM节点依旧保持在页面上让后更新它的class , attrs , props , style等等就好了,这也就是为什么上面做same判断的时候就是只要data定义过就行,而不需要两个data完全保持一致,因此我们可以得出一个结论,那就是只要diff算法觉得不是一定需要替换DOM结构才能实现要求的话,diff就尽量不移除页面上的DOM,因为那太浪费性能了。

在这里插入图片描述
接下来就走到子节点了,diff本质上是一个递归的过程,这个updateChildren特别有意思我们可以一起来看一下。这里他会把新旧虚拟DOM的子元素都传过去。
在这里插入图片描述
这里的updateChildren方法会初始化定位一些元素,比如newStart , oldStart,newEnd,oldEnd。然后判断新的孩子中有没有重复的Key,还记得么,如果有重复的key,vue是会报警告的,因为那会影响vue在diff时的判断和效率。那为什么不对旧的虚拟DOM进行判断呢,因为上一次已经判断过了呀,上一次的新虚拟DOM不就是这一次的旧虚拟DOM么,要警告它早就有警告啦,好了不说这么多了,我们继续往下看核心的算法。
在这里插入图片描述
在这里算法当中可以说所有子元素的不同都可以被检测出来,首先检测newStart和oldStart如果两个属于相同的节点,摘取出来进行详细比较。再次检测newEnd 和 oldStartrt如果两个属于相同的节点,摘取出来进行详细比较,如果依然不同,在让newStart 和oldEnd进行比较。。。

我么可以画几张图来验证一下这个算法。
在这里插入图片描述
可以看一下加入我们这个时候是最常见的末尾插入,这个时候,每一次进行diff的时候,都会在newStart 和 oldStart这里停下,因为他们的节点是一样的,然后细细比较完毕之后,会将两个start都向前进一位,供下一次使用,一只到最后一个E和空比较发现不同,就走到最后一个条件重新创建一个节点,这样页面上就会多一个e节点了。

如果是在开头或者中间插入呢
在这里插入图片描述
同样的,每一次在进行循环的时候都会走到newEnd和oldEnd这里停下,然后进行详细对比发现没什么变化,然后将末尾索引前进一位。进而就会剩下最后一个E就和之前一样了,如果是插入中间的情况呢。
在这里插入图片描述
第一步他发现newStart和oldStart相同,然后停住了,索引前进一位,第二步他发现newStart和oldStart相同,然后停住了,索引前进一位,第三步,它发现newStart和oldStart不相同,但是oldEnd和newEnd相同于是又停住了,最后他发现又只剩下E了,然后创建了一个新的元素这个时候他是知道索引的,所以它知道把E插在哪里。而我们为什么需要key呢,其实我看过很多的博客,但是始终并未在源码层面给出依据,今天我将找到真正的依据。
在这里插入图片描述
依据就在这里,diff是根据这个函数来判断两个节点是否相似,其中就有对key的判断,在我上上图中,所谓A B C D就是key,大家想象一下加入没有这个所谓的Key的话,是不是在diff的过程中,即便两个节点的内容不同,那么这个sameVnode也会通过,在进行细细比较的时候,他发现实际上是不同的,又得需要创建新的节点了,但实际上是因为这个sameNode判断的太松了,导致没进入到正确的判断条件当中,但如果加上了这个key,在进行sameVnode判断的时候,就会因为A 和 E就是key不一样呀,所以会让条件继续判断从而一直进入到正确的判断中去。从而避免了误判导致的误创建。而这就是答案。

好了因此通过这样的递归的比较,当进行细细比较的时候,他发现不同就会把新值进行更新,从而达到了只更新变化的那一部分。

值得注意的是,每一个虚拟DOM都记录着自己的父节点,因此找到相应的父节点插入进入是比较容易的。总之新虚拟DOM在找寻父节点这一块永远和旧虚拟DOM保持一致就好了。
在这里插入图片描述
如果是文本节点,那么就会对比新虚拟DOM的文本与旧虚拟DOM的节点是否相同,如果不相同在这里进行更新的操作。如果不是文本节点,就对childen继续进行updateChilden进行递归的操作。直到找到最后一个节点。

在这里插入图片描述
等这里的代码运行结束,页面就被更新了,diff也完成了它应该做的任务。等diff函数栈执行完毕,最小量更新就完成了。

三、总结

1.最小量更新
在进行diff的时候,vue是遵循最小量更新的,也就是说,vue不在万不得已下是不会在页面上直接移出DOM节点而重新创建的,这个万不得已的条件就是如果节点类型变了,节点消失,节点新增等,这些才是必须要创建DOM的必要条件,其他情况都是在原来的DOM基础上进行修改,我们也可以在其中看到diff算法在这个过程中处理的颗粒度是很小的。

2.递归
diff毋庸置疑是用递归完成的,从根节点开始遵循深度优先遍历的原则,进行处理,更新DOM的过程就伴随着虚拟DOM的递归过程,等递归的调用栈结束后整个DOM树就被更新好了。

总结:那么本地的diff算法就总结到这里,其实还有很多细节是没有写到的,我也特别希望大家能够根据源码一个一个函数将他全部看明白,如果有错误的地方希望能够提出来,共同交流,那么本篇文章的结束就意味着vue2.0源码分析系列都介绍完了。再次感谢你的阅读!

这篇关于vue2.0源码——diff算法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!