mini-vue的介绍

1.剥离核心代码

当我们打开 vue3 的源码之后你会发现，代码量是如此之多。这个源码到底该从何读起。虽然 vue3 代码的可读性是很高的，但是架不住代码量大呀

mini-vue只会涉及到核心逻辑，去除非核心逻辑，让代码更具备可读性

2. 详细的注释

在每一个具体的代码上都增加了详细的注释，方便可以更快速的理解代码的行为

2.如何使用

1.下载

mini-vue : https://github.com/cuixiaorui/mini-vue

vue3源码 :https://github.com/vuejs/vue-next

2.运行

vscode安装live server本地运行即可

3.调试

运行example下的html文件&&打开调试工具

 

在每个关键的路径节点上都给出了 console.log ，这样的话，只需要打开调试台就可以看到详细的运行流程，并且当你想要 debug 代码的时候也可以通过 console.log 快速的定位到具体的代码

4.项目结构

 

example 是放置了一些 demo

lib 是 build 之后的文件（demo 实际执行的文件）

src 是核心逻辑

5.Example的使用

mini-vue 中所有的函数命名都是和源码中保持一致的，你可以复制函数名然后去 vue3 中搜索来对比学习

当你已经掌握并且理解这个 mini-vue 了，你就可以去看 vue3 的源码了，你会发现读起来真的就没那么难了

3.vue3源码组织方式

1.采用 TypeScript 的方式重写

为了提升代码的可维护性，Vue 3.x 的源码全部采用 TypeScript 编写
大型项目的开发都推荐使用类型化的语言，在编码的过程当中帮我们检查类型的问题

2.使用 Monorepo 管理项目结构

把独立的功能模块都提取到不同的包中，每个功能模块之间的划分明确，模块之间的依赖关系也明确
每个功能模块都可以单独测试、单独发布以及单独使用

 

3.packages 目录下都是独立发行的包，可以独立使用

1.compiler - xxx 跟编译相关的代码
        compiler-core 与平台无关的编译器
        compiler-dom 浏览器平台下的编译器，依赖于 compiler-core
        compiler-sfc 用来编译单文件组件，依赖于 compiler-core 与 compiler-dom
        compiler-ssr 服务端渲染的编译器，依赖于 compiler-dom

2.reactivity 数据响应式系统，可以独立使用
3.runtime - xxx 跟运行时相关的代码
        runtime-core 与平台无关的运行时
        runtime-dom 针对浏览器的运行时，处理 原生DOM 的 API、事件等
        runtime-test 专门为测试编写的轻量级的运行时，这个运行时渲染出来的DOM树其实是一个JS对象，可以运行在所有的运行环境
4.server-renderer 用于服务端渲染
5.shared Vue内部使用的一些公共 API
6.size-check 私有的包，不会发不到 Npm，作用是在 Tree-shaking 之后检查包的大小
7.template-explorer 在浏览器运行的实时编译组件，会输出render函数，README.md 提供在线访问地址
8.vue 用来构建完整版的 Vue，依赖于 compiler 和 runtime