vue3 源码的学习---mini-vue
mini-vue的介绍1.剥离核心代码当我们打开 vue3 的源码之后你会发现,代码量是如此之多。这个源码到底该从何读起。虽然 vue3 代码的可读性是很高的,但是架不住代码量大呀mini-vue只会涉及到核心逻辑,去除非核心逻辑,让代码更具备可读性2.详细的注释在每一个具体的代码上都增加了详细的注释,方便可以更快速的理解代码的行为2.如何使用1.下载mini-vue :https://githu
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
更多推荐
所有评论(0)