Vue3的架构设计

90 阅读2分钟

一、项目管理

Monorepo是现代管理项目代码的一种方式,指在一个项目仓库(repo)里管理多个模块、包或项目。

Vue3源码采用Monoreop的方式进行管理,将模块拆分到packages目录中。各个模块作为独立的包来管理,这样职责划分更加明确。

  • 一个仓库可以管理维护多个模块,不用到处找仓库
  • 方便版本管理和依赖管理
  • 模块之间的引用,调用都非常方便
  • 每个模块可以作为独立模块,独立功能或者独立项目进行使用(核心功能可以按需使用)

项目结构

  1. compiler-core:与平台无关的编译器核心模块
  2. compiler-dom:针对浏览器平台的编译模块
  3. compiler-sfc:针对单位件(.vue文件)的解析模块
  4. compiler-ssr:针对服务端渲染的编译模块
  5. reactivity:响应式系统模块
  6. runtime-core:与平台无关的运行时核心模块
  7. runtime-dom:针对浏览器运行时模块
  8. runtime-test:用于测试的运行时模块
  9. server-renderer:服务端渲染模块
  10. shared:多个模块共享功能内容的模块
  11. vue:提供Vue3最终完整功能版本的模块
  12. vue-compat:用于迁移构建和兼容vue2的模块

采用TypeScript

Vue2早起采用Flow进行类型检测(Vue2中对TypeScript支持并不友好),Vue3源码采用TypeScript来进行重新重构。同时Vue2.7也采用TypeScript进行重写。TypeScript能对代码提供良好的类型检查,同时也支持复杂的类型推导。

复杂的框架项目开发,使用TypeScript强类型语言有利于代码的维护,在编码期间就可以帮助我们做类型检查,更早的避免错误。所以TypeScript基本上已经是主流工具库的标配。