如何开始 Vue3 源码阅读

1. 学会调试源码

1. 下载源码

git clone https://github.com/vuejs/vue.git vue3-source-code

2. 安装依赖

   依据 package.json 里的包管理器和 node 版本进行依赖的安装 给打包命令加上 --sourcemap

{
  "scripts": {
    ...
    "dev": "node scripts/dev.js --sourcemap",
    "build": "node scripts/build.js --sourcemap",
    ...
  }
  ...
  "packageManager": "pnpm@8.15.4",
  ...
  "engines": {
    "node": ">=18.12.0"
  },
  ...
}

3. 全局软链接这个包

cd packages/vue
pnpm link

4. 新建一个 vue3 demo 项目

pnpm create vite

然后根据终端里选项进行配置

5. 在 demo 项目里安装依赖并连接咱们的 vue 包的全局软连接

pnpm i 
pnpm link vue

现在就可以愉快地开始在 chrome 里 debug vue3 源码了

tips 还可以利用 playground直观看到 vue 代码编译成 js 的样子，从而有助于理解渲染器部分相关的代码。

2. 阅读源码的方法

1. 带着问题阅读

   读代码的过程中给自己提一个问题，以解答这个问题为目的去阅读，避免像个无头苍蝇一样，因为源码的量特别大，而且在文件之间不停跳跃，会很大程度消解自己的阅读兴趣和耐性。

2. 看得见的思考

   把自己读到的代码进行注解，并回答自己的问题，把这些写下来放到博客或笔记里。这样可以避免自己看到后面，忘记前面。

3. 学会看单元测试

   • 在 vscode 中安装 Vitest Runner
   • 把根目录下的 scripts 文件拷贝一份到 packages 里的某一模块下的 __test__ 里
   • 然后就可以 debug 某一个单独的测试用例里
   • 这也是进一步贯彻带着问题阅读

4. 多浸泡一会儿

   某些模块比较复杂难懂，可以选择多读一会，也可以从网上看看他人的带图解的描述，也可以看看书。

5. 输出获取正向反馈

   把自己的阅读代码形成的阅读笔记，或者总结的脑图，甚至是自己写的 mini 版输出，获取正向反馈。