~$ 存档

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

【本篇为原创,转载请注明出处】

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

现在,怎么能实现这个算法呢?

 

posted on 2022-02-03 00:19  LuoTian  阅读(35)  评论(0编辑  收藏  举报