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