Vue源码分析-读源码的准备工作

Vue作为当下非常流行的前端UI框架,值的对其感兴趣的前端开发者对其一探究竟。

为什么要读源码

真的有读源码的必要吗？作为一个已经工作了三年的业务开发而言。工作过程中，确实没遇到过需要看vue源码的地方。那这源码还读吗？笔者的答案是读，下面意义列举出读源码的几个动机：

1. 了解前端UI框架的具体设计
2. 获得一种参与大型外部项目，并了解其内部细节的能力，支撑日常开发更快速的定位并解决。而不是只停在它构建的上层抽象上使用
3. 当一些比较复杂问题发生时，可以从更底层的设计上思考构建解决方案。可能会获得更大的收益

没有读过源码并不意味着什么不好的事情，也不意味着就没有读源码的能力。因为在工作中也会需要读别人写的代码，两者差别其实不大。只是平时工作中的代码都是团队内部的代码，并且业务代码不存在抽象问题。更多的是同样组件的重复，即使进行组件化项目，进行组件提取。随着微服务逐渐成熟，前端应用代码更呈现出模板化，部署模块化，并且组件之间的交互大部分是树形的。

源码构建

首先将源码下载至本地，vuejs/core是 vue3 的代码仓库。对于开源项目，我们应该首先阅读 README 来获取项目相关的基本信息。这些信息将指导我们进行接下来的编译和构建

git clone https://github.com/vuejs/core.git # vue3 代码仓库，本文主要分析vue3
# git clone https://github.com/vuejs/vue.git # vue2 代码仓库
cd core

从项目根目录中的 README 中没有找到很多信息，其中 Contribution 节介绍了如何参与代码贡献的细节。点击Contributing Guide查看细节

Contributing Guide 介绍了怎样参与进 vuejs，为 vue 项目提交代码的工作流。对于我们本地调试只需要看下面三个章节即可

• Development Setup
• Scripts
• Project Structure

vue3 项目采用 monorepo 的方式组织代码，使用 pnpm 作为包管理工具。在文档中推荐使用 nr 来代理包管理工具。此处我们不使用 nr，而是直接使用 pnpm。因为 nr 只是自动识别包管理工具，然后使用对应的工具而已。

pnpm i
npm run build --all

构建完成够将在每个子项目下生成dist目录，每个子目录将发布为一个不含src目录的包。

由于vue使用monorepo的方式组织相关包，所以package下的子包将通过各种组合来完成vue整个项目，下面对packages下的子包进行介绍

1. vue： 一个包含了运行时和编译器的完整构建
2. runtime-dom：浏览器目标的运行时
3. runtime-core：平台无关的运行时核心
4. reactivity：响应式系统
5. compiler-core： 平台无关的编译器核心
6. compiler-dom：浏览器专用的编译器插件

搭建调试项目

此处使用vite来快速搭建一个调试项目

mkdir inspect
cd inspect
yarn create vite .
# 交互式创建项目
yarn # 安装依赖

创建完成后，调试项目内的vue相关包使用的是npm上发布的包，并不是本地源码目录下的包。需要将本地目录下的vue依赖链接到调试项目。这样，在本地vue源码的更改经过编译后，即可在调试项目中直接获得效果

cd ../core
cd packages/vue # 对package下的所有子包进行生成link
yarn link
cd ../inspect/node_modules
yarn link vue @vue/runtime-dom # 等等在node_modules下的没调试项目依赖的包

启动调试代码

cd ../
yarn run dev

在performance中记录启动后页面渲染的火焰图。来查看主要的调用过程

从图片里能看出来我们主要的调用栈。如使用createApp创建app，使用mount挂载。在挂在函数内部调用了render，patch等。下一篇我们将在生命周期中加上断点来调试程序所经过的主要函数

参考

[1] 目录树文档