Vue.js 3.x 优化概览

1. Vue.js框架的演进过程

Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念。

Vue.js 2.x 的版本痛点问题：

• 源码自身的维护性；
• 数据量大后带来的渲染和更新的性能问题；
• 鸡肋 API；
• TypeScript 支持不佳；
• …

Vue.js 3.x 带来的优化

• 源码优化

• 性能优化

• 语法Api优化

  

2. Vue.js 3.0 优化概览

那么接下来，我们就一起来看一下 Vue.js 3.0 具体做了哪些优化。

2.1 源码优化

首先是源码优化，也就是祖师爷对于 Vue.js 框架本身开发的优化，它的目的是让代码更易于开发和维护。

源码的优化主要体现在使用 monorepo 和 TypeScript 管理和开发源码，这样做的目标是提升自身代码可维护性。接下来我们就来看一下这两个方面的具体变化。

2.1.1 更好的代码管理方式：monorepo

1. 什么是monorepo？

就是把多个项目放在一个仓库里面，相对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。

2. monorepo 解决什么问题？

   • 多个repo难以管理，编辑器需要打开多个项目；

   • 某个模块升级，依赖改模块的其他模块需要手动升级，容易疏漏；

   • 公用的npm包重复安装，占据大量硬盘容量，比如打包工具webpack会在每个项目中安装一次；

   • 对新人友好，一句命令即可完成所有模块的依赖安装，且整个项目模块不用到各个仓库去找；

3. monorepo 在vue.js 3.x 中的应用

源码的优化体现在代码管理方式上。

Vue.js 2.x 的源码托管在 src 目录，然后依据功能拆分出了

• compiler（模板编译的相关代码）
• core（与平台无关的通用运行时代码）
• platforms（平台专有代码）
• server（服务端渲染的相关代码）
• sfc（.vue 单文件解析相关代码）
• shared（共享工具代码）

等目录：

而到了 Vue.js 3.0 ，整个源码是通过 monorepo 的方式维护的，根据功能将不同的模块拆分到 packages 目录下面不同的子目录中：

可以看出相对于 Vue.js 2.x 的源码组织方式，monorepo 把这些模块拆分到不同的 package 中，每个 package 有各自的 API、类型定义和测试。

这样做的优势在于：

• 使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确
• 开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性。
• 一些 package（比如 reactivity 响应式库）是可以独立于 Vue.js 使用的，这样用户如果只想使用 Vue.js 3.0 的响应式能力，可以单独依赖这个响应式库而不用去依赖整个 Vue.js，减小了引用包的体积大小，而 Vue.js 2 .x 是做不到这一点的。

参考资料：

• 什么是monorepo？
• Vue3.0 中的 monorepo 管理模式