位置: IT常识 - 正文
Vue3 diff算法图解分析(vue2 diff算法)
编辑：rootadmin推荐整理分享Vue3 diff算法图解分析(vue2 diff算法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3 diff算法原理,vue diff算法详解,vue differ,vue中diff,vue3.0 diff 算法,vuediff算法原理,vue3的diff算法,vue3.0 diff 算法,内容如对您有帮助，希望把文章链接给更多的朋友！
大家好，我是剑大瑞，本篇文章主要分析Vue3 diff算法，通过本文你可以知道：
diff的主要过程，核心逻辑diff是如何进行节点复用、移动、卸载并有一个示例题，可以结合本文进行练习分析如果你还不是特别了解Vnode、渲染器的patch流程，建议先阅读下面两篇文章：
Vnode渲染器分析1.0 diff 无key子节点在处理被标记为UNKEYED_FRAGMENT时。
首先会通过新旧子序列获取最小共同长度commonLength。
对公共部分循环遍历patch。
patch 结束，再处理剩余的新旧节点。
如果oldLength > newLength，说明需要对旧节点进行unmount
否则，说明有新增节点，需要进行mount;
这里贴下省略后的代码。
const patchUnkeyedChildren = (c1, c2,...res) => { c1 = c1 || EMPTY_ARR c2 = c2 || EMPTY_ARR // 获取新旧子节点的长度 const oldLength = c1.length const newLength = c2.length // 1. 取得公共长度。最小长度 const commonLength = Math.min(oldLength, newLength) let i // 2. patch公共部分 for (i = 0; i < commonLength; i++) { patch(...) } // 3. 卸载旧节点 if (oldLength > newLength) { // remove old unmountChildren(...) } else { // mount new // 4. 否则挂载新的子节点 mountChildren(...) } }从上面的代码可以看出，在处理无key子节点的时候，逻辑还是非常简单粗暴的。准确的说处理无key子节点的效率并不高。
因为不管是直接对公共部分patch，还是直接对新增节点进行mountChildren（其实是遍历子节点，进行patch操作），其实都是在递归进行patch，这就会影响到性能。
2.0 diff 有key子节点序列在diff有key子序列的时候，会进行细分处理。主要会经过以下一种情况的判断：
起始位置节点类型相同。结束位置节点类型相同。相同部分处理完，有新增节点。相同部分处理完，有旧节点需要卸载。首尾相同，但中间部分存在可复用乱序节点。在开始阶段，会先生面三个指正，分别是:
i = 0，指向新旧序列的开始位置e1 = oldLength - 1，指向旧序列的结束位置e2 = newLength - 1，指向新序列的结束位置let i = 0const l2 = c2.lengthlet e1 = c1.length - 1 // prev ending indexlet e2 = l2 - 1 // next ending index下面开始分情况进行diff处理。
2.1 起始位置节点类型相同对于起始位置类型相同的节点，从左向右进行diff遍历。
如果新旧节点类型相同，则进行patch处理
节点类型不同，则break，跳出遍历diff
// i <= 2 && i <= 3while (i <= e1 && i <= e2) { const n1 = c1[i] const n2 = c2[i] if (isSameVNodeType(n1, n2)) { // 如果是相同的节点类型，则进行递归patch patch(...) } else { // 否则退出 break } i++}上面上略了部分代码，但不影响主要逻辑。
从代码可以知道，遍历时，利用前面在函数全局上下文中
下一篇：phpcms phpsso验证码错误(php手机验证码验证)
