个人博客

基本介绍

TIP

官方文档open in new window

一、简介

  • vue3 源码采用 monorepo 方式进行管理，将模块拆分到package目录中
  • Vue3 采用ts开发,增强类型检测。 Vue2 则采用flow
  • Vue3的性能优化，支持tree-shaking, 不使用就不会被打包
  • Vue2 后期引入RFC , 使每个版本改动可控 rfcs

二、架构分析

1.Monorepo介绍

Monorepo 是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)

  • 优点：
    1. 一个仓库可维护多个模块，不用到处找仓库
    2. 方便版本管理和依赖管理，模块之间的引用，调用都非常方便
  • 缺点：
    1. 仓库体积会变大。

2.项目结构

├─packages             # N个repo
│  └─compiler-core       # 与平台无关的编译器核心
│  └─compiler-dom        # 针对浏览器的编译模块
│  └─compiler-sfc        # 针对单文件解析
│  └─compiler-ssr        # 针对服务端渲染的编译模块
│  └─reactivity          # 响应式系统
│  └─runtime-core        # 与平台无关的运行时核心 (可以自定义渲染器)
│  └─runtime-dom         # 针对浏览器的运行时。包括DOM API，属性，事件处理等
│  └─runtime-test        # 用于测试
│  └─server-renderer     # 用于服务器端渲染
│  └─shared              # 多个包之间共享的内容
│  └─size-check          # 用来测试代码体积
│  └─template-explorer   # 用于调试编译器输出的开发工具
│  └─vue                 # 完整版本,包括运行时和编译器

3.核心模块

                           +---------------------+
                            |                     |
                            |  @vue/compiler-sfc  |
                            |                     |
                            +-----+--------+------+
                                  |        |
                                  v        v
               +---------------------+    +----------------------+
               |                     |    |                      |
     +-------->|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
     |         |                     |    |                      |
+----+----+    +---------------------+    +----------------------+
|         |
|   vue   |
|         |
+----+----+   +---------------------+    +----------------------+    +-------------------+
    |         |                     |    |                      |    |                   |
    +-------->|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
              |                     |    |                      |    |                   |
              +---------------------+    +----------------------+    +-------------------+

4.内部代码优化

  • Vue3 劫持数据采用proxy，Vue2 劫持数据采用defineProperty。defineProperty有性能问题和缺陷：

    1. 无法对属性的添加、删除动作的监测
    2. 无法对数组基于下标的修改、对于 .length 修改的监测
    3. 不能对 Map、Set、WeakMap 和 WeakSet 的支持

  • Vue3中对模板编译进行了优化，编译时 生成了Block tree，可以对子节点的动态节点进行收集，可以减少比较，并且采用了 patchFlag 标记动态节点

  • Vue3 采用compositionApi 进行组织功能，解决反复横跳，优化复用逻辑 （mixin带来的数据来源不清晰、命名冲突等）, 相比optionsApi 类型推断更加方便

  • 增加了 Fragment,Teleport，Suspense组件

  • Reflect 的优点：

    1. 里面的方法都具备返回值，知道是成功还是失败
    2. 方便对象的后续方法扩展