作为一个小白如何读vue的源码?

Posted 2023-02-27 天地会珠海分舵

有知乎网友提问如下：

标题：《作为一个小白如何读vue的源码?》
描述： 作为一个前端小白，之前从原生、jQuery、vuejs到现在使用vue-cli开发项目，现在想读一读vue的源码却不得其解，之前没有读过其他框架的源码，有点摸不着头脑，希望有内功高手指点一二.(补充：我不是来捣乱的，与《为什么只会Vue的都是前端小白？》无关，站边尤大)

我个人正在做这个事情，这几周在下班之后就会捣鼓学习vue的源码。一开始的时候确实有点找不到北，但是经过努力后，现在不敢说精通什么的，但是起码是能做到说对vue的实现有更深层次的理解了。

比如以前写一个v-if的指令，只是从表面知道可以根据条件隐藏和显示下面的元素。但是经过源码阅读后，就知道这些个指令是怎么随着页面模板在模板编译过程中生成ast语法树，随后生成render函数，然后在render函数中会对v-if绑定的变量做判断是否为其渲染虚拟dom，然后patch函数怎么将这个新的虚拟dom和老的虚拟dom作diff，然后最小更新到页面。

阅读vue源码的过程中也走过不少的弯路，以下我根据自己的经验说下我的一些建议之类的，不敢说是避坑指南什么的，只是给后来者一个借鉴罢了。

1. 明确目标才能坚持和有的放矢

首先，我们需要明确我们阅读vue源码的目标。因为不同的目标可能会导致走的路径不一样，同时也会导致你是否能够坚持下去，毕竟，对不少人来说，源码的阅读还是比较枯燥的事情。

比如，我自己阅读源码的初衷是，自己写了几年vue的代码了，但是从来没有了解过底层发生了什么事情？此前一直忙于功能代码的实现，没有时间去思考太多，有问题上谷歌解决了就完了，知其然不知其所以然。而最近一段时间项目没有那么忙了，所以就想静下心来，好好学习下vue的实现原理，了解其从模板编译到虚拟dom生成到新老虚拟dom的diff，到响应式系统实现原理，到生命周期具体实现等等

所以我这里阅读的话就会比较泛，需要先学习一些比较全面的背景知识，这个我后面会提及。

而假如你是为了解决某个问题而想阅读vue源码的，比如觉得vue的render方法不够高效，想自己手写整个算法。那这个时候估计你就只关注虚拟dom怎么生成这一块就够了。

又假如说你只是为了应对面试而看vue源码。那我觉得你可能没有必要亲自去下场进行源码的阅读，你大可去看人家写的源码阅读文章，以及与之相关的一些面试试题，这样子会来得更容易达到面试的要求，省时间之余还省脑细胞。

2. 学游泳先找个教练，看源码先看下别人的文章和教程

无论你是为了应付面试，还是要解决某个问题，又或者说是想全盘了解vue的实现，我觉得第一步还是先去看别人的文章或者视频教程。

vue是一个前端框架，里面牵涉了很多需要涉及的背景知识，比如编译原理中的抽象语法树AST，虚拟DOM，堆栈数据结构及一些经典算法等等。

如果你是一开始就自己钻入到vue源码的海洋中的话，我担心你背景知识不够会导致你呼吸困难，不至于憋死，但过几天可能你就会放弃了。

所以，作为题主所说的小白，我会建议你先去网上搜索下别人写的vue源码分析相关的文章，看下人家的经验和总结。

其实别人的经验所以能总结成文章，为了能让读者看明白，往往都是经过深层的思考的。一些你自己看源码半天理解不了的，可能人家文章点一下你就醍醐灌顶了。

我自己在看源码之前，先是在油管上学习了 @尚硅谷教育 的vue源码解析的视频教程，这里同时说声感谢了。

该课程严格意义上来说不是带你去进行vue源码的分析，而是由浅入深的为你阐述vue源码各大模块的基本原理。比如：

• 通过学习一个简单的模板引擎mustache，让你知道模板编译大概是怎么回事
• 通过学习简单而流行的虚拟dom先驱snabbdom，让你知道渲染函数和h函数是怎么回事，虚拟dom又是怎么一回事，diff算法又是怎么做的
• 通过学习堆栈相关的一些算法，让你知道模板是怎么被解析成ast抽象语法树的
• 通过手写observer，watcher，dep，defineReactive等由浅入深的给我们实现了一个响应式系统 等等

3. sourcemap和debugger，自己亲手调试vue源码

等有了上面这些背景知识之后，这时我们入手vue的源码就会轻松很多了。

但是，这里不建议直接拿个源码就开始啃！

记得以前金山求伯君说过，代码都是调试出来的！

这里我想改一下，源码都是靠调试看懂的！

我们直接看代码的时候，往往看着看着自己就走丢了。到了某一个层级的函数调用的时候，就不知道自己身处何处，当前的this究竟指向的是谁了！？

这个时候我们就需要有个debugger，打个断点，看下当前的调用栈，以及当前栈里面的变量内容，这样就不至于迷失自我了。

当然，这里你最好为vue打开sourcemap。

相关的教程相信你在搜索引擎中输入个‘vue源码调试’之类的就能找到一大把了，很简单的，不难，你试过就知道了。

弄好后你一修改vue源码就自动编译，然后你就可以在你的示例代码中引用该调试版的vue.js来进行调试，别提多酸爽了！

4. 写阅读笔记以加深理解及帮助别人形成良性循环

很多时候我们学习东西的时候会进入一个恶性循环，学了一段时间后就忘记了，然后又要花差不多同等的时间再来学一遍，如此往复。

学习源码也一样，毕竟源码不是能直接应用的一部分，这更多是一个内功心法。学了后，时间长了，很快也就忘却了。然后下次又要花时间去走同样的路去重新学习。

其实打破这个恶性循环很好的一个方式就是做学习笔记。我觉得做笔记起码有以下的一些好处：

• 在写笔记文章的过程中，你会加入自己的理解，让自己对源码的理解更加深刻 经过自己思考然后变成笔记后，更加难以忘却
• 就算过一段时间后忘记了，往回看下自己的笔记，很快又能重拾回来了。比你重新再去看源码来得省事省力
• 能帮助到后人。你的一些心得，对于其他想入门vue源码的人，可能是非常有用的提点。 其他？
• 基于同样的原因，我自己也有写源码阅读笔记，我也希望能通过写笔记能加深自己理解，让自己学习到的知识不至于这么快被遗忘，同时，像上面说的，希望能帮到别人，形成一个良性的循环，就像我一开始学习的时候也是先看了别人的教程和文章一样。

以下是我自己的笔记专栏：《Vue源码情景分析》。

至于写得是否能合乎大家的胃口，这个我就控制不了了。反正，无论是为了自己，还是为了vue源码阅读社区，我觉得我都有在尝试尽一份力。大家轻踩吧！

我是@天地会珠海分舵，「青葱日历」和「三日清单」作者。能力一般，水平有限，觉得我说的还有那么点道理的不妨点个赞关注下！