Vue-DIFF算法

DIFF算法

　　用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中

　　当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异

　　把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了

DIFF算法的过程

　　当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁

　　通过sameVnode进行判断，相同则调用patchVnode方法

　　patchVnode做了以下操作：

　　　　找到对应的真实dom，称为el

　　　　如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点

　　　　如果oldVnode有子节点而VNode没有，则删除el子节点

　　　　如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el

　　　　如果两者都有子节点，则执行updateChildren函数比较子节点

　　updateChildren主要做了以下操作：

　　　　设置新旧VNode的头尾指针

　　　　新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作