4.怎么理解vue中的diff算法?

怎么理解vue中的diff算法?

整体策略：深度优先，同层比较 （两个节点对比的时候会优先判断是否拥有子节点，做一些操作）

diff 过程:

• diff 优化：做了四种假设，假设新老节点开头结尾有相同节点的情况，一旦命中假设，就避免了一次循环，以提高执行效率。如果不幸没有命中假设，则执行遍历，从老节点中找到新开始节点。
  找到相同节点，则执行 patchVnode，然后将老节点移动到正确的位置。
• 如果老节点先于新节点遍历结束，则剩余的新节点执行新增节点操作。
• 如果新节点先于老节点遍历结束，则剩余的老节点执行删除操作，移除这些老节点。

patchVNode是diff发生的地方
进行首尾两侧的相同节点的猜测，如果首尾都没有相同节点，那么就会进行遍历查询，拿出新数组的首个去老数组中查询，如果找到就做对应操作，如果找不到就创建新元素，剩下的节点就是批量新增或删除

总结：

1. diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff) ， 将变化的地方更新在真实DOM上;另外,也需要diff高效的执行对比过程，从而降低时间复杂度为0(n)。（衡量代码的好坏，重要的两个指标：运行时间、占用空间）

正常树形结构的时间复杂度是o(n)^3，使用diff将时间复杂度降为o(n)

3. vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之 对应,只有引入diff才能精确找到发生变化的地方。
4. vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch。
5. diff过程整体遵循深度优先、同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作;比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点;借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。