区别介绍

• 源码采用 monorepo 方式进行管理，将模块拆分到package目录中

• Vue3 采用ts开发,增强类型检测。 Vue2 则采用flow

• Vue3的性能优化，支持tree-shaking, 不使用就不会被打包

• Vue2 后期引入RFC , 使每个版本改动可控 rfcs

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

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

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

• 增加了 Fragment,Teleport，Suspense组件

一.Vue3架构分析

#1.Monorepo介绍

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

• 一个仓库可维护多个模块，不用到处找仓库

• 方便版本管理和依赖管理，模块之间的引用，调用都非常方便

缺点：仓库体积会变大。

#2.Vue3项目结构

• reactivity:响应式系统

• runtime-core:与平台无关的运行时核心 (可以创建针对特定平台的运行时 - 自定义渲染器)

• runtime-dom: 针对浏览器的运行时。包括DOM API，属性，事件处理等

• runtime-test:用于测试

• server-renderer:用于服务器端渲染

• compiler-core:与平台无关的编译器核心

• compiler-dom: 针对浏览器的编译模块

• compiler-ssr: 针对服务端渲染的编译模块

• compiler-sfc: 针对单文件解析

• size-check:用来测试代码体积

• template-explorer：用于调试编译器输出的开发工具

• shared：多个包之间共享的内容

• vue:完整版本,包括运行时和编译器

3.安装依赖

4.workspace配置

目录结构配置

配置模块名称及打包选项

创建软链yarn install

二.构建环境搭建

1.对packages下模块进行打包

scripts/build.js

2.rollup配置

rollup.config.js

3.开发环境打包