简述vue2.x 和 vuex3.x 渲染器的 diff 算法？

Vue面试题 5月前 0 73

Vue和React一样，都使用了一种叫做Virtual DOM的技术，其中一个核心特性就是Diff算法。Vue2.x和React的Diff算法都是基于两个简单的假设：

基于这两个假设，Vue在进行Diff算法比对时，首先会进行同层级的比较，然后再进行跨层级的比较。这种策略极大地提高了Diff运行的性能，使得时间复杂度从O(n^3)提升到了O(n)。

具体来说，Vue2.x的Diff算法过程如下：

头头比较：在新旧两个节点数组的开始位置设置一个索引标记，如果新旧开始节点的标签和key相同，则进行patch操作，然后将新旧开始索引都加1。
尾尾比较：如果新旧开始节点无法匹配，则比较新旧结束节点。如果新旧结束节点的标签和key相同，则进行patch操作，然后将新旧结束索引都减1。
新尾旧头比较：如果以上都无法匹配，则将新结束节点与旧开始节点比较，如果标签和key相同，则进行patch操作，并将旧开始节点移动到旧节点数组的尾部，旧开始索引加1，新结束索引减1。
新头旧尾比较：如果以上都无法匹配，则将新开始节点与旧结束节点比较，如果标签和key相同，则进行patch操作，并将旧结束节点移动到旧节点数组的头部，新开始索引加1，旧结束索引减1。
遍历查找：如果以上都无法匹配，就在旧节点数组中查找与新开始节点相同key的节点，找到就进行patch操作，并将找到的旧节点移动到旧开始节点的前面，新开始索引加1。
创建新节点：如果以上都无法匹配，说明新开始节点是全新的节点，直接创建新节点，新开始索引加1。
删除旧节点：最后，如果旧开始索引<=旧结束索引，说明旧节点数组中还有剩余的节点未处理，这些节点都是多余的，可以直接删除。

以上就是Vue2.x的Diff算法过程，这种算法在实践中被证明是非常高效的。

注意，虽然你提到了Vuex 3.x，但是其实Vuex并不涉及到Diff算法，它是Vue.js的状态管理库，主要负责管理和维护组件之间的共享状态。