Vue3.x源码解读(1)-起步2022年从vue3.x源码学起，这是我的第一篇掘金文章，参考了大佬的文章和布局，如果有

使用的Vue3源码的版本号是3.2.29

参考：Vue3

下载Vue3源码

git命令

git clone https://github.com/vuejs/core.git

如果clone过程有报错，可把https改成git

git clone git://github.com/vuejs/core.git

去github手动下载然后解压

装包

不要使用npm install, 因为Vue3.x必须使用pnpm安装，不相信可以一试

安装pnpm，按照官网pnpm
想安装Homebrew，Homebrew
查看 pnpm 是否安装成功

pnpm -v

pnpm install

安装过程中，到最后会有卡顿，需要等待，如果一次不成功就执行多次，本人技术有限，所以暂未发现卡顿问题原因

目录结构

tree -aI ".git*|.vscode" -C -L 1

.
├── .DS_Store
├── .eslintrc.js
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── SECURITY.md
├── api-extractor.json
├── jest.config.js
├── netlify.toml
├── node_modules
├── package.json
├── packages     // vue3源码目录
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── rollup.config.js
├── scripts
├── test-dts
└── tsconfig.json

packages目录 tree -aI -C -L 1

.
├── .DS_Store
├── ReADME.md
├── compiler-core
├── compiler-dom
├── compiler-sfc
├── compiler-ssr
├── global.d.ts
├── reactivity     // 响应式系统
├── ref-transform
├── runtime-core   // API 实现
├── runtime-dom    // DOM 实现
├── runtime-test
├── server-renderer
├── sfc-playground
├── shared         // 工具库
├── size-check
├── template-explorer
├── vue        // Vue3代码总入口
├── vue-compat
└── vue-demo      // 调试代码

sourcemap

根目录下rollup.config.js文件，找到output.sourcemap = !!process.env.SOURCE_MAP这行代码，我的在93行，修改为

output.sourcemap = true

根目录下tsconfig.json文件，把"sourceMap": false，改为

"sourceMap": true,

开发调试

执行以下命令，启动开发环境：

npm run dev

看到如下效果，并在vue/dist目录下生成vue.global.js文件，则表示成功。如果想要在源码中添加注释或者改动，不要关闭当前命令，当前命令可以监测源码的改动，如果发现改动会自动进行打包

bundles /Users/admin/Desktop/cj/study/vue3/vue-next/packages/vue/src/index.ts → packages/vue/dist/vue.global.js...
created packages/vue/dist/vue.global.js in 5.9s

[2022-01-27 10:25:58] waiting for changes...

vue-demo 调试demo

在packages目录下新建vue-demo文件，新建index.html
引入上一步生成的vue.global.js文件
index.html文件代码为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue/dist/vue.global.js"></script>
</head>
<body>
  
  <div id="app">{{ name }}</div>

  <script>
    const App = {
      data() {
        return {
          name: 'vue3'
        }
      }
    }
    debugger
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

在浏览器打开这个index.html
打debugger是为了能在浏览器找到源码入口文件 runtime-dom/src/index.ts，入口代码便是 createApp 的构造函数

注：如果在之后的调试启动环境中可能会报 vue-demo 找不到 package.json，这个时候复制一个package.json文件放在vue-demo目录下即可