Vue3.0源码结构分析

“关注 前端开发社区 ，回复“ 1” 即可加入 前端技术交流群，回复 “ 2” 即可免费领取500G前端干货！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VLfB4jCn-1600135063713)(https://imgkr2.cn-bj.ufileos.com/01a6b83f-779c-496b-baf1-942e3e06a759.jpg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=tF6acP8kMEXXYRvWs9dlkRN%252BjGc%253D&Expires=1600163189)]

Vue3.0源码结构分析

首先我们对vue的源码结构进行说明，搞懂每个文件夹里面代表啥，这样才能有针对性的去分析，学习。

Vue 源码地址： https://github.com/vuejs/vue-next

Vue2与Vue3的对比

• 对TypeScript支持不友好（所有属性都放在了this对象上，难以推倒组件的数据类型）
• 大量的API挂载在Vue对象的原型上，难以实现TreeShaking。
• 架构层面对跨平台dom渲染开发支持不友好
• CompositionAPI。受ReactHook启发
• 对虚拟DOM进行了重写、对模板的编译进行了优化操作…

项目结构

clone 下来的源码结构如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Z6GDXMA-1600135063717)(https://imgkr2.cn-bj.ufileos.com/247056b2-83de-454c-a241-c854cf294d6a.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=nZkmc%252BkK6tq2HVytASuwhtc96VQ%253D&Expires=1600163467)]

• 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  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

最近：

vue.config.js的优化配置

vue3.0新特性初体验（二）

请各位帅哥美女多多支持帅编，回复“ 1” 即可加入前端技术交流群，回复“ 2” 即可领取500G前端干货
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJmeQ2nS-1600135063723)(https://imgkr2.cn-bj.ufileos.com/1097afd9-ab25-4880-ba75-b5fd2f6c279b.jpg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=rwIEu2ogVoyfJ37jWhkPPpZ%252BrV4%253D&Expires=1600163207)]