虚拟DOM以及Diff算法

123 阅读1分钟

1、虚拟DOM和真实DOM的区别

真实DOM:

image.png

虚拟DOM是一个JavaScript对象。它的意义是用JavaScript对象描述DOM的层次结构:

image.png

因此,Diff算法是发生在虚拟DOM上的。Diff算法是把新虚拟DOM旧虚拟DOM进行比较。比如以下例子,左边是旧的虚拟DOM,右边是新的虚拟DOM。

image.png

经过比较之后,可以得到若干个更新策略,例如插入一个span,插入一个li等等。然后对真实DOM进行修改。

2、h函数产生虚拟节点

h函数的作用:产生虚拟节点(vnode)。以下代码调用h函数:

image.png

得到这样一个虚拟节点:

image.png

还可以这样调用h函数:

image.png

3、一个虚拟节点有哪些属性

image.png

其中 data 存放DOM的属性,例如style,class,id等等。elm表示当前虚拟节点会挂在到哪个真实DOM节点上。

4、Diff算法特点

image.png

例子详见:www.bilibili.com/video/BV1v5…

5、patch函数的两种用法

image.png

第一种用法,参数1是真实DOM,参数2是虚拟DOM。这表示把虚拟DOM挂载到真实DOM上。

image.png

第二种用法:参数1和参数2都是虚拟DOM。这表示对比新虚拟DOM和旧虚拟DOM的不同点,并且计算出用最少的步骤把旧虚拟DOM修改为新虚拟DOM的步骤方法。最后对真实DOM进行修改。

6、patch函数比较的规则

判断新虚拟DOM和旧虚拟DOM节点是不是同一个节点:

新key等于旧key && 新selector等于旧selector

6、Diff算法的优化策略:命中查找策略

image.png