diff算法

什么是虚拟dom？
虚拟dom是指用js来描述的HTML的结构

为什么用引用虚拟dom？
因为重新渲染数据会引起dom的重绘和回流（重排），这对性能消耗消耗是非常大的，我们在开发的时候尽量避免重绘和回流。因此vue就引入了虚拟dom，也就是virtual dom，这样可以避免直接频繁操作真实的dom,以此来减少性能消耗。

diff算法的守则

1. 只比较同一层级，不跨级比较
2. 标签名不同，直接删除，不继续深度比较
3. 标签名相同，key相同，就认为是相同节点，不继续深度比较

通过h函数生成VNode，VNode中包含一些参数，元素，如div等，data，如class属性或者绑定事件或者样式，children子节点，text文本等。elm，虚拟节点挂载到真实节点

patch函数
patch函数在首次页面渲染的时候会执行一次，将vnode元素渲染到一个空的容器里，更新的时候再调用patch函数，用新的vnode代替老的vnode，在patch函数中，如果key和tag都相同，则执行patchvnode函数

如果比较两个VNode的key和sel元素相同，则说明是同一个VNode，执行patchVNode函数，否则创建新的dom元素更新dom元素

patchVNode函数
在patchvnode函数中，会有很多情况，如果新的vnode和老的vnode中都有children，则会执行updatechildren方法更新children

看是否是指同一个对象，如果是，直接return
看文本节点是否相等，如果不相等，新的替换旧的
比较子节点， 如果新节点有，旧的没有，直接新增
比较子节点，如果新的没有，旧的有，直接删除
如果都有，就执行更新子节点函数

仅记录