面试题开始更新换代:该问无虚拟DOM了

988 阅读5分钟

最近尤雨溪在深圳举办的 Vue Conf 上郑重宣布了无虚拟 DOMVue:也就是 Vue Vapor 已经可用了。

但目前还处于 Alpha 版本,不建议大家用在生产环境上。

在公众号上刷到这条消息的时候往下翻了翻,想看看评论区都是怎么说的:

其实评论区这些问题很有可能在我们下次面试时会被面试官问到,大家也不用给面试官加滤镜,面试官也不一定就有多懂。之所以有人觉得面试官很厉害很可能是因为面试官会在自己擅长的方向上多问,如果他所擅长的恰巧不是你所擅长的,那你当然会觉得他好像很懂的样子。但如果把你俩的角色互换,你来问他,你是不是也可以专门在自己所擅长的方向上做文章,你照样也可以把他给问倒。

就像之前看到的一个短视频,一位博主说他小时候老被说挑食,他就好奇大人怎么就不挑食呢?后来长大了发现,并不是大人不挑食,而是大人买菜的时候就只买自己爱吃的,做菜也都是做自己爱吃的,那当然不挑食了,面试其实也是同样的道理。

尤其现在是无虚拟 DOM 刚出来,相关文章非常稀少,而愿意花时间去研究源码的人却并不多。但这并不代表面试就不会考,通常情况下面试官不太会去问自己不熟悉的领域,比方说我在做面试官的时候,不会去问 WebGL 之类的东西,因为自己压根就不了解。但无虚拟 DOM 不太一样,因为无虚拟 DOMVue 重点宣传的一项新功能,能够大幅度提升性能,并且还能减少体积,官方给出的数据是:

场景虚拟DOM无虚拟DOM
Hello World 打包体积22.8kb7.9kb
复杂列表 DIff1x0.6x
内存峰值100%58%

这么牛逼的东西将来是一定会考的,但也不代表现在就不会考,比方说如果我是面试官的话,我就会把评论区里提到的那些问题通通问一遍,哪怕我也不知道正确答案。

有人可能会说你连个答案都不知道你问啥啊?人家说的对不对你都不知道,问了又有什么意义呢?其实这跟 WebGL 还真就不一样,大多数前端也都不太懂 WebGL 对吧?假如我们问别人 WebGL 的话,人家回答的是真听不懂。但依然可以通过面试者的气场、回答问题时的流利程度、以及他的自信来判断这个人到底有没有两把刷子。而无虚拟 DOM 并不像 WebGL 那样让不是这个领域的人一点都听不懂,只要面试者说的有道理的话,我们还是能听懂的。

而且这样也有助于我们去了解无虚拟 DOM 的原理,其实就相当于面试官是学生,面试者是老师,学生问老师问题,老师给学生解答一样。只不过这个所谓的“学生”不能表现出自己什么都不懂的样子,必须装作自己很懂,否则被“老师”看出来的话,就有被“拿捏”的可能。

正好我们公司也正在招人,20~30K、北京、中关村,这是我从评论区收集来的一些比较具有代表性的问题:

Screenshot_2025-07-14-21-07-37-65_9fe6e22b2196b45.jpg

SCR-20231107-ngex.png

SCR-20231108-marc.png

SCR-20231108-mdgj.png

2023-08-15 18-52-47.2023-08-15 18_53_11.gif

Screenshot_2025-03-14-00-26-54-48.jpg

Screenshot_2025-03-31-09-43-34-19_d138286dbdf585e.jpg

Screenshot_2025-03-31-14-40-51-89_e39d2c7de19156b.jpg

Screenshot_2025-03-14-00-01-29-03_9fe6e22b2196b45.jpg

SCR-20250716-nyzy.png

Screenshot_2025-03-13-23-58-20-84_9fe6e22b2196b45.jpg

Screenshot_2025-03-14-00-09-59-96_e39d2c7de19156b.jpg

Screenshot_2025-03-14-00-25-48-46_9fe6e22b2196b45.jpg

将评论区比较有代表性的问题整理后的省流版:

  • Vue1 就没有虚拟 DOM 为什么现在又回去了?
  • 虚拟 DOM 时期说是为了提升性能(从 Vue1Vue2)那现在无虚拟 DOM 怎么又提升性能了?
  • 没了虚拟 DOMjQuery 有什么区别?
  • 没了虚拟 DOM 怎么跨平台?
  • 当初为什么要用虚拟 DOM?现在为什么又要去掉?
  • 不是说不建议操作真实 DOM 才有的虚拟 DOM 吗?
  • 这个无虚拟 DOMVue Vapor 和同样没有虚拟 DOMVue1 有什么区别?
  • 无虚拟 DOM 是怎么提升性能的?
  • 如果无虚拟 DOM 比虚拟 DOM 更好 那为什么当初 jQuery 还会走向没落?
  • 没了虚拟 DOM 还需要 Diff 算法吗?
  • 为什么没有无虚拟 DOMReact
  • 你觉得 React 也能像 Vue 一样来个无虚拟 DOM 模式吗?

我会把我觉得答得很有道理的答案总结起来,当每个问题都能有答案的时候我就会再发一篇文章来给大家作为参考。其实这些问题里有的已经有答案了,有的是通过自己思考得来的,有的则是其他人早已直接或者间接给出了答案,比如:

Screenshot_2025-04-13-13-30-41-82_d138286dbdf585e.jpg

Screenshot_2025-04-13-13-33-53-81_d138286dbdf585e.jpg

Screenshot_2025-04-13-13-39-18-96.jpg

其实只需要多动脑思考一下就会发现上面的问题并不难,当然这并不代表我只问这些问题,肯定还是先问一些常规性的问题,觉得面试者有一定的水平之后再去问这些问题。一方面是考察面试者对新技术的敏感度,另一方面是看看面试者对无虚拟 DOM 的思考,看看他的思维是否足够灵活.

接下来我也会开始抽空钻研一下无虚拟 DOMVue 的源码,毕竟这玩意在面试时是一定会考的,关注一下,我会为大家续写 Vue Vapor 的原理解析。