简单聊聊Vue3项目结构及其源码阅读方式

前言

Vue3版本相对于Vue2版本底层做了许多的优化，相关的兼容性和不兼容性功能的改变在其官网有明确的说明，这里就不多说了。本文主要是对比Vue2聊聊下面两个方面：

• vue3项目结构相关
• vue3源码阅读方式

项目结构

对于Vue3项目本身的结构，个人觉得主要关注点有两点：

• 使用TypeScript
• Monorepo项目管理形式

使用TypeScript

Vue2项目使用Flow（Flow是JavaScript代码的静态类型检查工具），而Vue3中则使用TypeScript（JavaScript的超集）。

随着前端分离模式流行以及工程化的发展，前端项目的规模逐渐变大，可维护性等方面要求越来越高。而JavaScript语言的动态性等特点不足以更好地支持，所以才会出现提供静态类型检查的Flow和TypeScript。而至于Flow与TypeScript的优缺点的讨论，这里不作讨论，目前来说TypeScript是主流选择。

Monorepo项目管理形式

Monorepo是一种项目管理形式，概念上很好理解，就是多个项目放在一个仓库里面，相对立的是传统的MultiRepo模式，即每个项目对应一个单独的仓库来分散管理。

在Vue3中就是Monorepo项目管理形式，相关功能都被拆分成一个个子项目，放在packages目录下，主要有：

• compiler-core
• compiler-dom
• compiler-sfc
• compiler-ssr
• reactivity
• runtime-core
• runtime-dom
• vue

实际上每一个项目都是一个npm包的组织形式，即存在一个package.json文件。不同的项目管理形式都有其优缺点，Vue3之所以采用Monorepo项目管理形式，个人觉得主要有两点：

• 模块化便于扩展场景和后期维护
• 减少不同场景下引用的核心代码的体积大小

目前一些主流的库都是采用Monorepo项目管理形式，例如Babel。

Vue3源码阅读方式

从个人经验来说，阅读源码最好的方式就是以单一功能为出发点，根据简单实例去Debug，从而理解相关功能和思想。

不同项目的组织形式等等方面又决定了代码的可读性。对于我个人来说，Vue2与Vue3的源码阅读采用方式是不同的：

• Vue2源码阅读，无论是直接阅读源文件还是构建输出的单一文件，可读性都非常强，你可以任意选择你喜欢的方式

• Vue3源码因为其项目管理方式，一些功能都被独立拆分，直接阅读其构建后输出的单一文件是非常好的，直接阅读针对浏览器环境的构建输出单一文件相对来说可读性差些，因为存在较多的闭包

不论你阅读源文件还是构建后的文件，都是需要结合debug来进行的。对于Vue3，通过阅读每个子项目的构建文件这个方式可以快速理清相关关联点，而对于一些细节则结合源文件的静态类型来理解。