1、虚拟DOM和真实DOM的区别
真实DOM:
虚拟DOM是一个JavaScript对象。它的意义是用JavaScript对象描述DOM的层次结构:
因此,Diff算法是发生在虚拟DOM上的。Diff算法是把新虚拟DOM和旧虚拟DOM进行比较。比如以下例子,左边是旧的虚拟DOM,右边是新的虚拟DOM。
经过比较之后,可以得到若干个更新策略,例如插入一个span,插入一个li等等。然后对真实DOM进行修改。
2、h函数产生虚拟节点
h函数的作用:产生虚拟节点(vnode)。以下代码调用h函数:
得到这样一个虚拟节点:
还可以这样调用h函数:
3、一个虚拟节点有哪些属性
其中 data 存放DOM的属性,例如style,class,id等等。elm表示当前虚拟节点会挂在到哪个真实DOM节点上。
4、Diff算法特点
例子详见:www.bilibili.com/video/BV1v5…
5、patch函数的两种用法
第一种用法,参数1是真实DOM,参数2是虚拟DOM。这表示把虚拟DOM挂载到真实DOM上。
第二种用法:参数1和参数2都是虚拟DOM。这表示对比新虚拟DOM和旧虚拟DOM的不同点,并且计算出用最少的步骤把旧虚拟DOM修改为新虚拟DOM的步骤方法。最后对真实DOM进行修改。
6、patch函数比较的规则
判断新虚拟DOM和旧虚拟DOM节点是不是同一个节点:
新key等于旧key && 新selector等于旧selector