【本篇为原创,转载请注明出处】
vue的源码分为三块,其中最后一部分称为patch,也就是根据虚拟DOM进行更新。这一截内容的思路来源于snabbdom。
如果要把vue源码100%看懂,这一块是必不可少的。前段时间看了前两部分,也是在这最后一截没有仔细往下看。
但是snabbdom的源码记录的比较早,这次希望能完整的做个笔记。
patch算法的思路
很多思想难以理解,就在于没有一个能概括表达核心思想的例子,而这个例子又是通俗易懂的。因此,首先给出一个例子:
有两个平常的数组,分别为:
1,2,3,4,5 ->原数组,或称为旧数组
1,4,6,1000,100,5 ->新数组
目标:查找两个数组的不同,用新数组更新旧数组。
更新旧数组的意思是指,在旧数组的原地进行,比如增删改。新数组是个参照物,改变旧数组使之更新
首先,我们只用眼睛观察,得到最终结果如下:
1,4,6,1000,100,5
1、旧数组中有,而新数组没有的则要删除,这里是2和3
2、新数组有,而旧数组没有的要增加,这里是6,1000,100
3、旧数组有,新数组也有的,保持不变,这里是1,4,5
现在,怎么能实现这个算法呢?