Vue3diff算法原理和优化，2024年最新Web前端工程师面试题目和答案

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

Vue2.x diff算法

Vue2.x diff算法原理

传统diff算法通过循环递归对节点进行依次对比效率低下，算法复杂度达到O(N^{3)，主要原因在于其追求完全比对和最小修改，而React、Vue则是放弃了完全比对及最小修改，才实现从O(N}3) => O(N)。

优化措施有：

• 「分层diff」：不考虑跨层级移动节点，让新旧两个VDOM树的比对无需循环递归（复杂度大幅优化，直接下降一个数量级的首要条件）。这个前提也是Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。

在同层节点中，采用了**「双端比较的算法」**过程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较；

当发生以下情况则跳过比对，变为插入或删除操作：

• 「组件的Type(Tagname)不一致」，原因是绝大多数情况拥有相同type的两个组件将会生成相似的树形结构，拥有不同type的两个组件将会生成不同的树形结构，所以type不一致可以放弃继续比对。

• 「列表组件的Key不一致」，旧树中无新Key或反之。毕竟key是元素的身份id，能直接对应上是否是同一个节点。

• 对触发了getter/setter 的组件进行diff，精准减少diff范围

Vue3.0 diff

diff痛点

vue2.x中的虚拟dom是进行**「全量的对比」，在运行时会对所有节点生成一个虚拟节点树，当页面数据发生变更好，会遍历判断virtual dom所有节点（包括一些不会变化的节点）有没有发生变化；虽然说diff算法确实减少了多DOM节点的直接操作，但是这个「减少是有成本的」，如果是复杂的大型项目，必然存在很复杂的父子关系的VNode,「而Vue2.x的diff算法，会不断地递归调用 patchVNode，不断堆叠而成的几毫秒，最终就会造成 VNode 更新缓慢」**。

那么Vue3.0是如何解决这些问题的呢

动静结合 PatchFlag

来个???：

{msg}

静态文字

在Vue3.0中，在这个模版编译时，编译器会在动态标签末尾加上 /* Text*/ PatchFlag。**「也就是在生成VNode的时候，同时打上标记，在这个基础上再进行核心的diff算法」**并且 PatchFlag 会标识动态的属性类型有哪些，比如这里 的TEXT 表示只有节点中的文字是动态的。而patchFlag的类型也很多。这里直接引用一张图片。

其中大致可以分为两类：

• 当 patchFlag 的值「大于」 0 时，代表所对应的元素在 patchVNode 时或 render 时是可以被优化生成或更新的。

• 当 patchFlag 的值「小于」 0 时，代表所对应的元素在 patchVNode 时，是需要被 full diff，即进行递归遍历 VNode tree 的比较更新过程。

看源码：

export function render(_ctx, _cache, $props,$setup, $data,$options) {

return (_openBlock(), _createBlock(“div”, null, [

_createVNode(“p”, null, “‘HelloWorld’”),

_createVNode(“p”, null, _toDisplayString(_ctx.msg), 1 /* TEXT */)

]))

}

---

这里的_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)就是对变量节点进行标记。

总结：「Vue3.0对于不参与更新的元素，做静态标记并提示，只会被创建一次，在渲染时直接复用。」

其中还有cacheHandlers（事件侦听器缓存），这里就不讲了。

diff算法源码解析

以数组为栗子：

newNode:[a,b,c,d,e,f,g]

oldNode:[a,b,c,h,i,j,f,g]

步骤1:「从首部比较new vnode 和old vnode」,如果碰到不同的节点，跳出循环，否则继续，直到一方遍历完成；

由此我们得到newNode和oldNode首部相同的片段为 a,b,c，

源码：

const patchKeyedChildren = (

c1,

c2,

container,

parentAnchor,

parentComponent,

parentSuspense,

isSVG,

optimized

) => {

let i = 0;

const l2 = c2.length

let e1 = c1.length - 1

let e2 = c2.length - 1

while (i <= e1 && i <= e2) {

const n1 = c1[i]

const n2 = c2[i]

if (isSameVNodeType(n1, n2)) {

patch(

n1,

n2,

container,

parentAnchor,

parentComponent,

parentSuspense,

isSVG,

optimized

)

} else {

break

}

i++

}

//这里的isSameVNodeType

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {

// 比较类型和key是否一致（）

return n1.type === n2.type && n1.key === n2.key

}

「Tip」:这里的isSameVNodeType从**「type和key」**，因此key作为唯一值是非常重要的，这也就解释了 v-for循环遍历不能用index作为key的原因。

步骤2:「从尾部比较new vnode 和old vnode」,如果碰到不同的节点，跳出循环，否则继续，直到一方遍历完成；

由此我们得到newNode和oldNode尾部相同的片段为 f,g

while (i <= e1 && i <= e2) {

const n1 = c1[e1]

const n2 = c2[e2]

if (isSameVNodeType(n1, n2)) {

patch(

n1,

n2,

container,

parentAnchor,

parentComponent,

parentSuspense,

isSVG,

optimized

)

} else {

break

}

e1–

e2–

}

}

在遍历过程中满足i > e1 && i < e2，说明 「仅有节点新增」

if (i > e1) {

if (i <= e2) {

const nextPos = e2 + 1;

const anchor = nextPos < l2 ? c2[nextPos] : parentAnchor

while (i <= e2) {

patch(

null,

c2[i],

container,

anchor,

parentComponent,

parentSuspense,

isSVG

)

i++

}

}

} else if {

…

} else {

…

}

在遍历过程中满足i > e1 && i > e2，说明 「仅有节点移除」

if (i > e1) {

//

} else if (i > e2) {

while (i <= e1) {

unmount(c1[i], parentComponent, parentSuspense, true)

i++

}

} else {

//

}

步骤3: 「节点移动、新增或删除」

经过以上步骤，剩下的就是不确定的元素，那么diff算法将遍历 所有的new node，将key和索引存在keyToNewIndexMap中，为map解构，

if (i > e1) {

//

} else if (i > e2) {

//

} else {

const s1 = i

const s2 = i

const keyToNewIndexMap = new Map()

for (i = s2; i <= e2; i++) {

const nextChild = c2[i]

if (nextChild.key !== null) {

keyToNewIndexMap.set(nextChild.key, i)

}

}

}

接下来

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
, i)

}

}

}

接下来

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-HZSMd3T8-1713401312581)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！