Skip to content

Vue3 的源码怎么看

前言

本篇文章会介绍一些学习 vue3 的一些学习的方式,我将会介绍 vue3 从社区开始入手,到阅读源码,可能篇幅较长,日常更新中。

下面解答一些问题

  • 为什么要学习源码?

相信很多人,并不知道为什么需要阅读源码,可能大多数只是感觉可以用在可以装 B 上,但其实不然,其实阅读源码可以提升我们的编程水平的,也就是内力。

相信通过阅读源码,日积月累,并把这些代码或思想应用的自己项目中去,相信能够很好的提升自己的编码能力。

  • 读完 vue 的代码之后,框架过时了怎么办?

很多人可能会想:前端技术更新换代的那么迅速,当我刚刚花了很久的时间,阅读了一个框架或库的源码,但是又有了新的框架出现,我是不是白读了呢?我来解答一下:

所有的框架都会过时,我们需要的就是能够沉淀下来不变的东西,什么东西不变?算法,数据结构,编译原理,网络协议,操作系统,开发范式,软件工程,计算机组成原理。

我们通过阅读源码,可以将这些不变的东西进行沉淀,只要我们将里面的思想学会了,那么对于以后的任何框架,都可以根据我们的 内力 进行学习和阅读。

  • 源码那么多代码和文件夹,该怎么入手呢?

虽然源码代码很多,但是将其进行类别话的拆分,就可以很清晰明了了。

但是在阅读之前,需要将其中的项目说明文件进行阅读一遍,这也就是一个项目的说明书,不看说明书,可能你会摸不着头脑。

所以要先将 说明书(贡献指南)先看一遍。

  • 怎么把项目跑起来?

贡献指南 中,有详细的贡献细节描述、目录结构描述、安装方式,可以根据文档进行操作。

将代码克隆到本地

vue3 的仓库 core 在这里,可以先 fork 下来之后下载到本地。

看 vue3 源码前的准备

技术点

算法

其它

  • 位运算
  • 设计模式
  • 动态规划

Vue3 核心代码

vue3 的核心源码在 packages 中,简单分为三大模块,分别是由 reactivitycompilerruntime 构成最核心的源码,下面分别来介绍一下

reactivity

reactivity 也就是响应式,它的源码建议第一个看,因为它只有 1000 行左右。读完之后你大概就可以知道响应式是怎么执行的,proxygetset 是怎么劫持的。

vue3 的 reactivity 是使用的 ES6 的 Proxy 进行实现的,简单的实现方式可以参考 第四章 响应系统的作用与实现

compiler

compiler 是编译器。第二个要看的就是 compilercompiler 就需要硬啃了,如果对 compiler 不太熟悉,那么读 runtime 就非常痛苦。

如果你在读 compiler 的时候是非常痛苦的,那么你就需要了解基本是编译原理。这里推荐一个库,可能是有史以来最小的编译器:the-super-tiny-compiler,大概是一个 200行 左右的编译器实现。

runtime

runtime 是运行时。runtime 接收的是 compiler 执行之后的结果,所以建议最后来看。

简单介绍一下目录结构

  • reactivity: vue 独立的响应式模块
  • compiler-core: 与平台无关的编译模块,例如基础的 baseCompile 编译模版文件, baseParse 生成 AST
  • compiler-dom: 基于 compiler-core,专为浏览器的编译模块,可以看到它基于 baseCompile,baseParse,重写了 compiler、parse
  • compiler-sfc: 用来编译 vue 单文件组件
  • compiler-ssr: 服务端渲染相关的
  • runtime-core: 也是与平台无关的基础模块,有 vue 的各类 API,虚拟 dom 的渲染器
  • runtime-dom: 基于 runtime-core,针对浏览器的运行时
  • vue: 引入导出 runtime-core,还有编译方法

先从社区入手

浏览最新 issues

根据众多的 issues 中可以进行根据他人提出的一些问题或者 Bug,可以根据描述进行修复,修复完成之后可以进行提交 pr

根据 close 的 issues 进行推断

在已经关闭的 issues 中,可以看到以往的 issues 中,一些问题大家是如何讨论的,最后是如何解决的,可以根据下面的评论回复可以获取一些修复的方式等。

根据 commit 推断

commit 中可以看到每一次的提交记录,在修订 Bug 可以根据后面的 issues 编号进行查看。

Pull requests

在这里可以看到最新的 PR,可以根据别人提交 PR 的方式试着进去模仿提交新的 PR

资源

awesome-vue3 里面,我整理了众多的 vue3 的一些周边资源,提供使用,欢迎大家 star

vue3 目前有两个官方文档,这里介绍一下: