02-Vue3.0源码阅读之整体架构

149 阅读2分钟

「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」。

前言

学习源码的三个理由:

  1. 加深理解

  2. 增强解决问题的能力

  3. 掌握真正底层的技能

如何学习源码

下面有一些尝试:

  1. 找到一条主线,比如从创建开始研究怎么创建,怎么更新。

这里可以从debugger(打断点开始)。

  1. 画一张思维导图

  2. 提出一些问题(可以从平时开始积累),从源码中去寻找答案

  3. 造一个轮子(平常积累别人轮子示例,先模仿,再创新!)

  4. 费曼学习法(分享学习)

将我们学习到的东西讲述或者表达给别人直到能表述清楚。

Vue项目的整体架构

在阅读源码之前,我们要对整个项目的分布有一个整体的概念。

目录结构如下

packages

packages是重点部分。

核心内容分为:

  • compiler-* 编译器相关

  • reactivity-* 响应式相关

  • runtime-* 运行时相关

scripts

相关配置文件都可以来这个文件夹中找,包含了打包等所有的可执行js脚本文件。

模块间的依赖关系

image.png

这张图示例了对应模块间的最简依赖关系,最最核心的部分是core,dom是基于core的延伸。最终版本集合于Vue总库。

入口

package中还有一个重要的文件夹,vue,从名字可以看出来,这是vue总项目的汇总

image.png

image.png

这个文件夹除了Vue对应的js文件之外,还有一些examples,我们可以使用这个文件创建自己的测试用例,也可以依据项目本身的测试用例来进行单步调试或者查看调用栈等的方式来进行对应源码的阅读。

以上就是我们对应Vue3.0的源码的一个整体架构的介绍。一定要有一个大概的认识,后面我们就继续深入来研究Vue的源码。大家一起加油鸭