By reading the source code of the software framework, you can learn about the operating mechanism of the framework itself, and better understand the API design, principles, processes, and design ideas of the framework; we need to know what is happening and why.
The source code of Vue 3 has been greatly changed compared to the Vue 2 version. It adopts the Monorepo standard directory structure and uses TypeScript as the development language (vue2 will also replace TypeScript at the end of April 2022. development language) and added many new features and optimizations.
1. Download & start Vue3 source code
2023-03-31The latest version is V3.3.0-alpha.5
bash copy code git clone https://github.com/vuejs/core.git
After the download is complete, enter the core folder. Since the vue3 source code is built with Yarn, we need to install Yarn first.
npm i yarn -g
Then install the relevant dependencies
yarn --ignore-scripts
You can use npm run dev to enable source code debugging mode. The complete source code directory structure is as follows:
core
├─ packages
│ ├─ compiler-core // 核心编译器
│ ├─ compiler-dom // dom编译器
│ ├─ compiler-sfc // vue单文件编译器
│ ├─ compiler-ssr // 服务端渲染编译
│ ├─ dts-test //测试Typescript类型以确保类型保持为预期类型
│ ├─ global.d.ts // TypeScript声明文件
│ ├─ reactivity // 响应式模式，可以和其它框架配合使用
│ ├─ reactivity-transform // 该功能现在被标记为不推荐使用，并将从Vue核心中删除,提案已经被放弃。
│ ├─ runtime-core // 运行时核心实例相关代码
│ ├─ runtime-dom // 运行时dom相关API、属性、事件处理
│ ├─ runtime-test // 运行时测试相关代码
│ ├─ server-renderer // 服务器渲染
│ ├─ sfc-playground // 单文件组件在线调试器
│ ├─ shared // 内部工具库，不对外暴露
│ ├─ size-check // 测试代码体积
│ ├─ template-explorer // 用于调试编译器输出的开发工具
│ ├─ vue //面向公众的完整版本，包含运行时和编译器
│ └─ vue-compat //是Vue 3的一个构建，它提供了可配置的Vue 2兼容行为。
2. Directory module
The modules of compiler-core, compiler-dom, runtime-core, and runtime-dom are more important.
compile: It can be understood as when the program is compiled, which refers to the time during which the source code we wrote is compiled into a target file. Here it can be understood as when we compile the .vue file into a browser Some work on being able to recognize .js files.
runtime: It can be understood as the time when the program is running, that is, after the program is compiled, the browser opens the program and runs it, until the program is closed.
The reactivity directory is also important. It is the source code of the responsive module. Since the overall source code of Vue 3 adopts the Monorepo (single warehouse) specification, each sub-module below it can be independently compiled and Package to provide external services independently. When using it, use require('@vue/reactivity') to introduce it. Enter the reactivity directory and you can see the corresponding package.json file.
3. Build version
You can build it with the following command to build all versions of Vue 3
npm run build
The built files are in the directory: core\packages\vue\dist. The description is as follows:
// cjs（用于服务端渲染）
vue.cjs.js
vue.cjs.prod.js（生产版，代码进行了压缩）
// global（用于浏览器<script src="" />标签导入，导入之后会增加一个全局的Vue对象）
vue.global.js
vue.global.prod.js（生产版，代码进行了压缩）
vue.runtime.global.js
vue.runtime.global.prod.js（生产版，代码进行了压缩）
// browser（用于支持ES 6 Modules浏览器<script type="module" src=""/>标签导入）
vue.esm-browser.js
vue.esm-browser.prod.js（生产版，代码进行了压缩）
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js（生产版，代码进行了压缩）
// bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会
让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js
It can also be selectively built through the following command. The specific meaning of the -f parameter and other parameter configurations can be found in core/rollup.config.js.
# 构建运行时版本 vue.runtime.global.js
node scripts/dev.js -f global-runtime
# 构建出完整版,vue.global.js
node scripts/dev.js -f global
If you need to compile the template on the client side (i.e. pass a string to the template option, or mount it to the element using HTML within the element's DOM as a template), you need a compiler and therefore a full build, the code is as follows:
// 需要编译器
Vue.createApp({
template: '<div>{
{ hi }}</div>'
})
// 不需要
Vue.createApp({
render() {
return Vue.h('div', {}, this.hi)
}
})
When using Webpack's vue-loader, the templates in the .vue file are pre-compiled to JavaScript at build time. There is no need for a compiler in the final bundle, so you can just use the runtime build. Therefore, if you open the Vue page directly in the browser, you can directly use