Vue3.0源码结构分析

前端老道

发布于 2022-03-29 16:01:00

4280

文章被收录于专栏：Vue开发社区Vue开发社区

Vue3.0源码结构分析

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

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

Vue2与Vue3的对比

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

项目结构

clone 下来的源码结构如下：

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-15，如有侵权请联系 cloudcommunity@tencent.com 删除

api