web 前端培训：vue3 源码中细节知多少

​

很赞同【越好的框架越不需要使用者特地去读】这个理念，毕竟我们研读源码就是为了解决具体问题，按需去看比较好，不过这个前提是你已经是一个系统化训练的工程师，如果是针对新手，尤其是前端这个特殊的领域，大部分同学都不是计算机出身 ，前端培训现在我建议去看 vue3 的源码 并不是其他的不好，而是 Vue3 很适合用来帮助初中级前端走完升级的路线，通过 vue3 源码中的细节，构建和丰富自己的前端知识体系

1.vue3 大部分代码是小右写的，平均代码质量比较高，React 也很赞，但是整体工程化过于复杂，不太适合新手，建议搞定 vue 之后去看 React 更好一些

2.源码阅读本身也是一个需要练习的技能，一次训练，持久收益

3.先忽略 ts，去看 @vue/reactivity,这是个独立的包，1000 左右，难度适中，测试覆盖率 100%（到 100%的测试 case 还是我提的 嘿嘿），非常适合作为第一个阅读的源码

a.还能巩固 ES6+的几个新数据解构和语法

b.之前我推荐 1000 左右的代码还是 seajs

4.研究文件解构，学习一下工程化体系

a.lerna 管理

b.script 下面的文件，研究 commit 规范，git hook，dev build 等配置

5.研究 runtime-core 和 dom，了解 vue 整个框架设计的理念

a.事件修饰符 once 的实现，并不需要 add 再 removeListener，而是 addEventListener 的时候加一个第三个参数，{once:true}的配置就可以

b.insertBefore 第二个参数给 null 的话，和 appendChild 效果一样

c.等等等等， 会让自己恍然大哦一下的小 tips

d.细节不多说，比如 dom diff 里面的 getSequence 生成最长递增子序列，会让你尝试去研究算法是个啥，然后研究 vue3 的贪心+二分实现的时候，还会了解动态规划的实现，算法能力++，至少意识到需要学算法，这也是前端老铁的软肋质疑

e.有些 vue 的实现让你了解 js 和 dom 里一些容易忽略的细节

f.shapeFlag 和 patchFlag 还会让你意识到位运算也需要学学

g.typescript 不用多说，看见不懂的语法，按需学一学也不错

h.看完就可以搞一本算法第四版之类的，好好学一下算法，有时候知道自己需要学也挺重要

6.compiler 了解 vue 编译的优化

a.让你知道原来还有个编译原理的东东需要学习

b.先去看 the-super-tiny-compiler 这 200 行代码， 了解一下 parser，ast，codeGenerator 等是啥意思

c.看完 compiler dom 和 core ，既能应付面试，还大概入门了编译原理

7.其他的很多实现也挺有意思，而且大部分代码都配有测试

a.slot

b.v-model

c.keep-alive

8.其他包比如 sfc，test 选看，按需看就行

9.其他的 vuex，vite，router 啥的也是类似

综上所述，看完 vue 生态代码其实是对前端这个特殊行业的新手工程师，可以起到帮助巩固计算机基础的重要性。

有时候不是我们不勤奋，而是没有科班的训练，我们不知道这些东西学的意义是啥，阅读框架源码的意义也在于此

当然完整系统的看完一个后，web前端培训阅读源码这个技能你也掌握了，针对其他框架就可以按需阅读，也就找到了自己高效学习的路线

ps：我 vue3 源码也是粗略看过，如果有说的不对的地方，以 vue 最新的源码为准

文章来源于前端迷

​