一、diff算法简介:
上面代码的改变有很多种方式,第一种:我们可以将左边box这个div全都删掉然后替换成右边这个div(但这种方式感觉太大费周章),第二种方法:是我们可以保持原有的内容不发生变化只添加新增的内容。
像第二种这样进行精细化对比实现最小量更新我们称为diff算法。
二、虚拟DOM :
用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。
diff算法是在两个虚拟DOM之间计算的,新虚拟DOM和老虚拟DOM进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的DOM上。
真实DOM如何变为虚拟DOM是属于mustache模板引擎的内容,在我们之前的模板编译中有讲解。
三、Snabbdom:
snabbdom是著名的虚拟DOM库,是diff算法的鼻祖,Vue的源码借鉴了snabbdom。
注:本篇博客仅简单说明,详细内容我们会在后面的博客中介绍。