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

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会向中间靠拢,进行下一节点的对比。

以下分五种情况讲解:

  1. “理想状态”,没变(如下图三):依次复用dom,oldStart和newStart向后移动,直至完成。

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

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

图五


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

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

图七

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

2.2:vue3diff

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

  1. “头对上头,或者尾对上尾:如vue2diff的前两种情况,这里不做过多讲解。
  2. ”头对不上头,尾也对不上尾“,如图八系列):这里老节点与新节点依次对比,找到了打个位置标记,当全部老节点判断完成后,借助最长递增子序列和前面的位置标记(书面语新旧节点位置映射表),再进行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)



  • 21
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值