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 节点再分情况操作 标签:el,Vue,patchVnode,DOM,VNode,算法,DIFF,节点 From: https://www.cnblogs.com/forever-ljf/p/16667847.html