如何描述diff算法过程
1、自顶上下,同层比较:比较两棵树是否有孩子节点,若有,比较孩子节点,此时比较的是一个数组,采用深度优先算法。
比较时会采用的策略:比较key是否相同、tag是否相同等一系列判断,都相同的情况下才会判定这两个节点相同。
整个流程:
判断是否元素=>双方都有孩子=>比较孩子=>新节点有孩子=>清空老节点文本
关于Diff
- 是什么
- 性能、好处:跨平台+兼容性
- 在什么地方使用、落地:在patch打补丁时,存在新旧虚拟dom时
- 怎么比较的:总体来说,深度优先+同层比较;首先从顶层比较,如果两者都是元素,那就判断两者是否有孩子,有则向下递归,比较过程中使用了重排算法,首先假设首尾相同(vue里独特的优化点),会存在四种可能性,最终结果是可能找不到,那么就要在新的数组中取出一个节点,在老的数组里查找是否有相同的节点,再进行patch操作,这个过程可能会重复好几次。