Vue3.0源码结构分析
Vue2与Vue3的对比
- 对TypeScript支持不友好（所有属性都放在了this对象上，难以推倒组件的数据类型）
- 大量的API挂载在Vue对象的原型上，难以实现TreeShaking。
- 架构层面对跨平台dom渲染开发支持不友好
- CompositionAPI。受ReactHook启发
- 对虚拟DOM进行了重写、对模板的编译进行了优化操作...
一.monorepo介绍
monorepo是一种将多个package放在一个repo中的代码管理模式
Vue3中 使用 yarn workspace + lerna 来管理项目
"workspaces": [
"packages/*"
]
1
2
3
2
3
通过
workspaces来指定需要管理的模块
二.lerna介绍
lerna是在js项目中用来管理多个package的工具
- 全局安装
npm install lerna -g
lerna init
1
2
2
- 常用命令
lerna bootstrap # 安装依赖生成软链
lerna ls # 查看所有包
lerna publish # 发布包
1
2
3
2
3
三.项目结构
- reactivity:响应式系统
- runtime-core:与平台无关的运行时核心 (可以创建针对特定平台的运行时 - 自定义渲染器)
- runtime-dom: 针对浏览器的运行时。包括DOM API，属性，事件处理等
- runtime-test:用于测试
- server-renderer:用于服务器端渲染
- compiler-core:与平台无关的编译器核心
- compiler-dom: 针对浏览器的编译模块
- compiler-ssr: 针对服务端渲染的编译模块
- template-explorer：用于调试编译器输出的开发工具
- shared：多个包之间共享的内容
- vue:完整版本,包括运行时和编译器
+---------------------+
| |
| @vue/compiler-sfc |
| |
+-----+--------+------+
| |
v v
+---------------------+ +----------------------+
| | | |
+------------>| @vue/compiler-dom +--->| @vue/compiler-core |
| | | | |
+----+----+ +---------------------+ +----------------------+
| |
| vue |
| |
+----+----+ +---------------------+ +----------------------+ +-------------------+
| | | | | | |
+------------>| @vue/runtime-dom +--->| @vue/runtime-core +--->| @vue/reactivity |
| | | | | |
+---------------------+ +----------------------+ +-------------------+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20