最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

总结：「vdom是为了减轻性能压力。dom是昂贵的，昂贵的一方面在dom本身的重量，dom节点在js里的描述是个非常复杂属性很多原型很长的超级对象，另一方面是浏览器渲染进程和js进程是独立分离的，操作dom时的通信和浏览器本身需要重绘的时耗都是很高的。所以大家机智的搞了个轻量的vdom去模拟dom，vdom每个节点都只挂载js操作的必要属性，每次组件update时都先操作vdom，通过vdom的比对，得到一个真实dom的需要操作的集合。整个机制是在JavaScript层面计算，在完成之前并不会操作DOM，等数据稳定之后再实现精准的修改。」

分析diff算法

---

由上我们知道了，新的虚拟DOM和旧的虚拟DOm是通过diff算法进行比较之后更新的。

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

来个???：

在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)

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总