Vue3.0源码结构分析

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

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

最近：

vue.config.js的优化配置

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

请各位帅哥美女多多支持帅编，回复“ 1” 即可加入前端技术交流群，回复“ 2” 即可领取500G前端干货

- END -

本文分享自微信公众号 - 前端开发社区（pt1173179243）。
如有侵权，请联系 [e-mail] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。