对于Vue 2 diff的讨论

vue2的diff

组件更新核心是响应式数据监控到数据的改变，重新生成了虚拟dom树，然后通过diff算法计算出前后虚拟dom树的差异点，更新dom时只更新变化的部分。 快问快答：

1. 为什么要diff？

答： O(n^3) 意味着如果要展示1000个节点，就要依次执行上十亿次的比较，无法承受大数据量的对比。

直接比较和修改两个树的复杂度为什么是n^3？

答： 老树的每一个节点都去遍历新树的节点，直到找到新树对应的节点。那么这个流程就是 O(n^2)，再紧接着找到不同之后，再计算最短修改距离然后修改节点，这里是 O(n^3)。

1. diff的策略是什么？有什么根据？

答： 1、Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计，因此仅进行同层比较。 2、如果父节点不同，放弃对子节点的比较，直接删除旧节点然后添加新的节点重新渲染； 3、如果子节点有变化，Virtual DOM不会计算变化的是什么，而是重新渲染。 4、同级多个节点可通过唯一的key对比异同；

1. diff流程是什么？

答： 新旧节点不同：创建新节点 ➜ 更新父占位符节点 ➜ 删除旧节点； 新旧节点相同且没有子节点：不变； 新旧节点相同且都有子节点：遍历子节点同级比较，做移动、添加、删除三个操作，具体见下图；