小白也能掌握的Vue/React框架源码学习方法

学习目的

首先我们学习东西一定要带有目的或者需求，这样才能对我们有更加实际的帮助。比如我们学习源码，是想了解其中的一个知识点原理，是为了提升日常开发能力，或者只是为了帮助面试等等这些都是可以的，具体学习到哪个程度完全取决于自己的实际需求，只有当我们带着目的去学习时，才能让我们保持学习的兴趣和热情，形成持续的正向反馈。

Vue和React是最流行的前端框架，我们平时参与的基本上都是这两类项目，所以学习这两个框架源码对我们来说是最具有实际效益的。至于学习哪一个，可以根据自己的兴趣或者当前正在接手的项目来决定。对于刚开始学习源码的新手来说，推荐先学习vue3的源码，因为react源码相对要更难更复杂一些，如果之前没有学习源码的经验，直接上手react源码可能会影响你的信心和热情。

当然这并不绝对，比如你正在开发vue2的项目，首先学习vue2的源码也是一样的，如果你在学习过vue2的源码之后再去查看Vue3的源码，你会发现你的学习效率会有明显提升，因为vue3的响应式API虽然发生了变化，但是它的框架设计核心思想没有变，它的响应式系统构成以及更新调度方面等内容基本是保持一致的，所以你会感觉到明显的熟悉感。

学习方法

下面我们就以vue3为例，掌握快速有效的框架源码学习方法。

项目搭建

首先从github找到vue3的源码仓库，然后选择你想要学习的框架版本，比如vue3.3.0，下载代码压缩包，解压后存放在指定的文件目录，作为我们学习的源码资料。

请不要说从第一个commit开始学习，这都是在扯淡的，等你看到最新的版本黄花菜都凉了，而且vue框架都更新几个大版本了，现在的源码变化早就天翻地覆了，我们学习源码是有收益期待的，而不是来消磨时间的。

然后使用vite创建一个vue3-test的项目，注意安装Vue依赖时要与学习的源码保持相同的版本号。

项目搭建完成后，移除默认的组件和内容，然后书写我们自己想要的内容，比如：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

// App.vue
<template>
  <index></index>
</template>

<script setup>
import index from './views/index.vue'
import { onBeforeMount, onMounted } from "vue";
onBeforeMount(() => {
	console.log("App onBeforeMount");
});
onMounted(() => {
	console.log("App onMounted");
});
</script>

// index.vue
<template>
	<div>
		<h3>Vue3源码解析</h3>
		<div>{{ count }}</div>
		<button @click="handleClick">修改</button>
	</div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted } from "vue";
    
const count = ref(1);
function handleClick() {
	console.log("修改count");
	count.value = 2;
}
onBeforeMount(() => {
	console.log("index onBeforeMount");
});
onMounted(() => {
	console.log("index onMounted");
});
</script>

测试的内容根据自己的需求随意书写，以上只是简单举例。直接使用vue3项目来学习源码最大的好处就是你既可以修改依赖源码，又可以随时更新测试内容，方便查看数据更新时框架内部不同的逻辑处理。

注意：这里修改依赖源码指的是在一些重点的逻辑地方书写日志代码，便于查看数据内容和执行情况，并非随意修改源码逻辑。

在修改依赖源码后需要删除deps目录的缓存，重新运行项目才能生效。

node_modules/.vite/deps

最后运行项目，即可开始vue3的源码学习之路。

源码调试

源码学习最重要的就是源码调试，直接在vue3项目启动程序打上断点：

const app = createApp(App)
app.mount('#app')

点击单步执行，即可进入createApp方法内部，你可以在任意的地方打上断点帮助你观察此方法内部的执行逻辑。

最后执行app.mount('#app')方法，即可正式进入vue应用加载时的源码学习和调试。

学习思路

注意，学习源码之前应该对这个框架应用有基本的熟练度，这样你在学习源码的时候才能时刻想起平时开发时的一些场景，为啥这么需要这样使用，或者哪些地方没有使用正确。如果对框架使用都比较陌生，来看源码那真是两眼一抹黑，这也不知道那也不知道，看了也白看。

在看源码时，首先要了解框架源码整体的目录结构，然后从入口文件开始学习。

├──packages
  ├── compiler-core    # 编译器核心代码   
  ├── compiler-dom     # 基于compiler-core，处理dom的编译器
  ├── compiler-sfc     # 编译vue单文件组件 
  ├── compiler-ssr     # 服务端渲染相关
  ├── reactivity       # vue3响应式模块，ref/reactive/effect...
  ├── runtime-core     # 运行时核心代码，组件创建/渲染/更新 
  ├── runtime-dom      # 基于runtime-core，使用原始dom_api处理dom
  ├── vue	             # 暴露外部的完整构建，包含编译器和运行时
  ├── shared 	     # 多个包共享的内部工具，公用方法
  ├── ...          

对于vue框架来说，我们主要学习reactivity响应式和runtime运行时部分的源码即可，这部分的内容包括了vue文档中80%以上的语法内容，是我们开发中最常用的功能和语法，剩下的一部分内容的重点在编译时处理，比如常见的setup语法糖和v-if和v-show之类的指令等等，在学习完运行时的源码之后有兴趣的也可以看一看编译部分的源码，这里也推荐大家看一看《Vue.js设计与实现》这本书，配合源码学习更加方便。

vue算是一个比较中庸的框架，这里说的中庸指的是它的编译时和运行时属于一个比较均衡的状态，我们只需要重点关注运行时的内容即可有最大的收获。而react就是一个典型的重运行时的框架，它在编译时能获得的收益非常有限【jsx的特点】，它的源码绝大部分都是运行时的处理逻辑，阅读react源码你不得不花费更多的时间在它海量的运行时处理，并且本身react源码架构更加复杂一些，所以推荐优先学习vue的源码，积累经验之后，以后学习react源码就可以进行参考对比，减少学习的难度和压力。

注意：学习的时候可以利用注释来记录一些执行逻辑内容，记录错误也没有关系，后面可以随时返回来修改，并且在学习完成之后也可以根据注释内容做笔记总结。

在学习源码的时候我们可以先专注于某个具体的流程或者说主线来学习，比如学习vue3应用的加载流程，组件的加载流程，响应式数据变化触发的更新流程等等，掌握大的方向之后，然后再学习一些常用API的实现原理，比如ref，reactive，watch等等。所以这里首先推荐你了解vue3应用的一个整体加载概念，这样对你开发vue3项目有非常大的帮助，可以提升你的整体视野，整个项目的变化都在你的掌控之中。

同时学习源码要牢记主线方向，掌握核心知识，切不可每个地方都逐行代码慢慢摸索，因为每个框架除了它的核心内容，都会有相当大的一部分代码是容错处理和一些性能测试内容，如果在这些地方消磨了你太多的精力，可能会导致你学习半途而废。

比如在vue3源码中有很多开发环境下的测试和警告代码，这些代码在生产构建的时候会被移除掉：

if (__DEV__){ ... }

在我们刚开始学习源码的时候，就可以折叠起来，重点关注于核心逻辑的执行，后面有需要的时候再来看这些次要的内容。

我们学习源码的时候最好是要边看边调试，或者是学习一部分源码逻辑后再配合调试帮助理解。学习源码调试是一个很重要的过程，你可以完整看到一个框架内部的执行逻辑，所以要利用好调试和日志来配合我们的源码学习。

最后在调试的时候要多多利用调试面板给我们提供的上下文信息和函数执行情况。

学习输出

俗话说得好，有输入就有输出。学习一个新的内容后，最好是要输出成果，这样才能知道自己是否真的掌握了，就像以前学生时代帮助同学讲题一样，能讲的出来讲的明白，那说明这个内容就是真的掌握了。对于源码学习来说，最好的输出就是做笔记总结和绘制流程图，这里推荐用typora来编写markdown文档进行笔记总结，用自己的话来描述学习源码的内容，这才算是掌握了。同时笔记总结也是一个巩固的过程，也许之前有些地方你的理解是比较模糊的，但为了写出来你就会激励自己必须得摸索清楚，以此良好的正向反馈。

常言道，好记性不如烂笔头，源码学习的内容一般都是比较多的，当时可能记住了，慢慢的就会遗忘，久了就只能记一个大概，如果做了笔记总结，我们就只用在需要的时候拿出来看一看，即可知晓清楚，同时在做笔记的时候也可以绘制一些执行流程图或者思维导图帮助理解，毕竟看图比看文字更容易理解且记忆深刻。最后绘图工具就不推荐了，桌面端的和在线的都有很多，选择自己喜欢的即可。

结束语

以上就是本文的全部内容了，觉得有用的可以点赞收藏！如果有问题或建议，欢迎留言讨论！