虚拟dom和diff算法

diff算法

diff算法可以进行精细化比对，实现最小量更新。
新虚拟DOM和老虚拟DOM进行diff（精细化比较），算出应该如何最小量更新，最后反映到真正的DOM上。

虚拟dom

image.png

虚拟dom就是用js对象描述DOM的层次结构，DOM中的一切属性都在虚拟DOM中有对应的属性。
虚拟dom结合patch函数生成真实dom节点并渲染到页面上。

h函数和vnode函数结合用来产生虚拟节点（vnode）

diff算法

注意点：

1. 节点中的key很重要，key是这个节点的唯一标识，告诉diff算法，在更改前后他们是同一个虚拟DOM节点。
2. 只有同一个虚拟节点才进行精细化比较，否则就会进行暴力删除旧的、插入新的。（如何判定是否是同一个虚拟节点？答：选择器相同且key相同）

3. 只进行同层比较，不进行跨层比较。即便是同一片虚拟节点，但是跨层了，diff算法也不会精细化比较。

   
   
   image.png