字节一面,面试官问我Vue3源码,我说……

196,670

“哥,我面试字节挂了!”

小明哭丧着脸:“MD,太卷了!这 Vue3 刚转正没多久,面试官就问上我原理了,什么 reactivity 实现原理,proxy ,Vue3初始化的流程,编译优化,diff 算法的实现……直接一面就挂了!”

“面试问原理正常呀, 虽然 Vue3 刚转正,但已经发版很久了呀,你不会没关注吧? ”

小明抓了抓头发:“关注是关注了, 但源码看不懂呀 ,那一个 renderer.ts 文件就 2000 多行代码,这怎么看呀?”。

image.png

“源码是难,但如果你想面大厂拿高工资,源码是绕不过的呀。面试官通过问你源码,一下子就能知道你是不是一个爱学习爱钻研的同学,还有呀,那 Vue3 项目那么大,处理的工程问题也要比我们平时做的项目复杂不知多少倍了,看看人家解决问题的思路和方式,也是非常受益的。“

“哥,源码重要性我知道,关键是看不懂……你那有没有好的 Vue3 源码学习资料呀 ,赶紧给老弟推荐推荐~”  

“你别说,还真让你赶上了,最近 github 上有一个库叫做 mini-vue , 用它来学习 Vue3 源码可以把难度降到最低。

“mini-vue 这个库主要特点是把 Vue3 源码中最核心的逻辑剥离出来,只留下核心逻辑 而且带有详细的中文注释以及完善的输出,可以帮助你快速理解框架核心运行流程。”

image.png

注释说明了逻辑处理的 case 是什么,非常清晰 (图片截取自mini-vue)

“哇塞,还有中文注释呢,真是太贴心了,毕竟我这英文确实不咋地哈哈!”

“你再跑一下库的 example 看看, 就那个 helloworld ,然后看看控制台的输出。“

image.png

"这些输出是什么?等等, 难道说是程序执行的流程节点?"

“没错,就是程序执行的流程, 基于这个输出日志,你就能知道实例化一个组件的流程是什么了, 有助于你理解整个框架的执行流程, 先建立一个整体认知。”

“而且你看看输出的右侧,你可以直接点击跳转到对应的代码上,然后就可以开开心心打上断点,好好琢磨这代码的实现了。”

image.png

“真是绝了, 怪不得这个库现在已经拿到 4.4k 的 star 了”

image.png

“还不只如此呢,再给你看个绝活,mini-vue 库里面的代码实现是和 Vue3 源码里面的实现保持高度一致的,比如说函数的命名吧,你看这个 diff 算法函数是 patchKeyedChildren 吧”

image.png

当你看完简单版的实现后,想看看源码里面是如何实现的, 你只需要复制这个函数名,然后跑到 Vue3 里面搜索一下就可以了。

image.png

“我草,这个绝了,我看完简单版本之后,再去看源码的话,难度就降低很多了呀!

“哈哈哈,是的,这个其实也符合学习模型,如果你一上来就看特别复杂的,对你来讲就到了学习的恐慌区了,很多同学就是被吓的,一看代码量那么大,逻辑那么复杂,直接就放弃了。而学习 mini-vue 这个库就是简单模式, 我再跟你说说 mini-vue 是基于什么思想做出来的吧  你以后也可以按照它的方式来实现你自己的 mini-react、mini-webpack、mini-rollup 。”

“真的是迫不及待了,哥你赶快坐下,我这就给你买罐红牛去,好好给我上一课~哈哈”

我喝了一口刚刚从冰箱拿出来的冰镇红牛,翘着二郎腿缓缓说道:“看你今天这么好学的份上,我再给你唠叨几句。像 Vue3 这么大的工程项目,它会做很多事,比如给开发环境下的用户良好的错误提示↓”

image.png

“你看这个,这里是在处理 HMR (热更新)↓”

image.png

“而这些逻辑在你刚刚看源码的时候是不需要关心的,但是这部分的逻辑对于你这个新手来讲非常不好区分,我给你画个图你感受感受”

“哈哈哈,哥你可真是灵魂画手呀,这尼玛画的这么抽象,不过我看明白了。你是指红色的方块是核心逻辑,而紫色的圆圈都是非核心的吧,比如错误提示和HMR

“哈哈哈,看来我的画功还是不错的,你一下就明白了,就是这个道理。而我们学习源码的时候第一步就是先摸清这个核心逻辑,这个也称之为 happy path, 相当于一棵大树的树干。把这个拿下后,后面我们就可以自己看了,代码逻辑里面无非就是处理各种各样的 edge case(边缘情况)。你有没有发现,其实这是对 Vue3 框架做了功能上的拆分。”

“我擦,又学到了,我已经感受到了,把 Vue3 整体拆分变小,然后这样难度就直线下降了,而我们再把 happy path 理解透彻,这一步学完之后再去理解那些 HMR 或者错误提示的逻辑,也会变得更简单。”

“对的,这个就是任务拆分的思想,你可以横着切,也可以纵着切,想怎么切就怎么切,如果从算法思想的角度来讲的话就是……”

“就是分而治之的思想!” 小明赶紧把他知道的名词抢先回答出来,生怕别人不知道他学过算法。

image.png

“哎呀,可以呀小明,看来你算法学得不错嘛。所以这个 mini-vue 库对于想学习源码的同学来讲非常有意义,现在作者已经完成了三大模块的编写了。”

“噢?三大模块是啥?我这还真不知道”

“三大模块是指 reactivity(响应式模块)、runtime-core(运行时模块)、compiler(编译模块) , Vue3 的核心就是这三大模块。现在 Vue3 的源码是采用 monorepo 的形式, 分了好多模块,不过对于你这初学者来讲,研究透三大模块就够你面试用了

"哦了哦了,我这就去把 mini-vue clone 下来好好学习学习,回头面试的时候争取搞定面试官!哥,那我学习 mini-vue 遇见问题的话可还得麻烦你呀,哈哈哈~"

“你可以直接加 mini-vue 作者的微信: cuixr1314,我们都叫他大崔哥。有问题直接问他就好了嘛 ,我有问题也是直接问他, 关于 mini-vue 上的问题他会回答你的,放心好了”

"我这就赶紧加上大崔哥哈哈哈~开心"