2024年Web前端最新vue2 vue3 diff算法比较(1)，面试几个月还没找到工作

最新推荐文章于 2025-03-25 10:07:17 发布

2401_84619565

最新推荐文章于 2025-03-25 10:07:17 发布

阅读量842

点赞数 21

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619565/article/details/138730296

版权

程序员专栏收录该内容

92 篇文章

订阅专栏

ES6

列举常用的ES6特性：
箭头函数需要注意哪些地方？
let、const、var
拓展：var方式定义的变量有什么样的bug？
Set数据结构
拓展：数组去重的方法
箭头函数this的指向。
手写ES6 class继承。

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

微信小程序

简单描述一下微信小程序的相关文件类型?
你是怎么封装微信小程序的数据请求？
有哪些参数传值的方法？
你使用过哪些方法，来提高微信小程序的应用速度？
小程序和原生App哪个好？
简述微信小程序原理？
分析微信小程序的优劣势
怎么解决小程序的异步请求问题？

图二

补充1：为什么不建议用index作为key值？

因为index不稳定，比如数组中间添加一个值，它后面的元素index值就全部变了，后面dom需全部更新，性能并没有优化。

2：有key

2.1：vue2diff

简单来说，就是先老节点与新节点，头对头->尾对尾->头对尾->尾对头,再不行就从根据新节点key值，找对应的老节点，找到更新对应的真实dom.以上五步是不符合条件依次往下，符合条件，新老节点的startIndex或endIndex会向中间靠拢，进行下一节点的对比。

以下分五种情况讲解：

“理想状态”，没变（如下图三）：依次复用dom,oldStart和newStart向后移动，直至完成。

图三
2. “头对不上头”，（如下图四）：头跟头比，对不上，尾巴对上了，从尾巴开始复用dom,oldEnd和newEnd向前移动，直至完成，多的删掉。

图四
3. “头对不上头，尾也对不上尾”，（如下图五）：头跟头没对上，尾跟尾也没对上，接下来就开始交叉对比了，首先是老的节点头跟新的节点尾对比，对上了就更新dom，对应的新旧节点头尾指针变化。（这里用红色表示对不上，没有更新dom ,蓝绿色表示对上了，有更新dom)

图五

4. “头对不上尾”，（如下图六）：除了头对不上头，尾对不上尾，头也对不上尾了，那就尾对头，对上了就渲染dom。（这里第一个头尾是老节点的，第二个头尾是新节点的）

图六
5. “完全乱序”，（如下图七）：头对不上头，尾对不上尾，头尾交叉也对不上，那就根据key值来找，newStart的key，按顺序从老节点中找到key值对应的节点，从oldStart开始哈，找到后渲染出来，就继续头对头，，，比下去。

图七

以上就是vue2diff的完整解析了，这里不贴源码了~

2.2：vue3diff

以下分两种情况简单讲解：

“头对上头，或者尾对上尾：如vue2diff的前两种情况，这里不做过多讲解。
”头对不上头，尾也对不上尾“，如图八系列）：这里老节点与新节点依次对比，找到了打个位置标记，当全部老节点判断完成后，借助最长递增子序列和前面的位置标记（书面语新旧节点位置映射表），再进行dom节点的复用与渲染。

图八

先确定头对不上头，尾对不上尾，以上是无序多个节点
列出新旧节点映射表，这里是为了区分是否新增节点，默认是0，这一步同时删掉需要删除的节点。
找出最长递增子序列，这里是为了做最少的改动。
渲染。如上图例子，我们从newEnd开始看，新旧节点映射表如图，可以知道f是新增节点，直接渲染。根据bdac来找最长递增子序列，是ac，ac位置不变，db位置移动。

补充2：vue3的最长递增子序列

vue3寻找最长递增子序列同时用了二分查找和贪心算法，这里不详细讲了。

补充3：vue2diff和vue3diff的比较

1：vue2diff是基于递归的双指针，vue3diff是基于数组的动态规划。

2：vue2全部比较，vue3不比较静态节点。

3：vue2的diff完全乱序的列表需要借助key，性能会好一些，vue3是借助位置变化值。（注意：有听到一个说法，vue3diff不需要key值，单看核心diff好像是哦，但是假设应对完全乱序的列表，没有key的话，vue3的做法和vue2是一样的吧~参考1）

补充4：虚拟dom

虚拟 DOM (Virtual DOM，简称 VDOM) 是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步。官方文档给的例子如下:

const vnode = {
  type: 'div',
  key:null,
  props: {
    id: 'hello'
  },


### 最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

*   HTML5新特性，语义化

*   浏览器的标准模式和怪异模式

*   xhtml和html的区别

*   使用data-的好处

*   meta标签

*   canvas

*   HTML废弃的标签

*   IE6 bug，和一些定位写法

*   css js放置位置和原因

*   什么是渐进式渲染

*   html模板语言

*   meta viewport原理

![](https://img-blog.csdnimg.cn/img_convert/64590c67cb47cd552a892ba710477f64.png)

*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/17fdfcb90fad04acc5e7273d1f853880.png)