Vue3 源码解析系列之初始化流程（一）持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

Vue3 发布已经很久了，很多小伙伴在工作或面试中可能都遇到过有关 Vue3 的问题。为了方便学习，我也从头开始了阅读Vue3的源码，为了防止自己忘记，在阅读源码的时候顺便写一些文章和画一些图，方便以后进行复习。

第一篇主要是介绍如何看源码和在源码中进行调试和打断点，这点非常重要，在看源码的时候灵活运用断点，能让我们更容易理解整个流程。

首先从 github 上 clone 一份Vue3的源码，我clone的版本是 3.2.33

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

然后开始安装依赖，Vue3 的包管理工具已经变成了 pnpm，所以我们安装依赖的时候最好使用pnpm，

npm isntall pnpm -g

pnpm install

安装完后，我们打开文件 package.json 我们需要修改一下脚本，找到 scripts 下的 dev，后面加上配置 --sourcemap

"scripts": {
  "dev": "node scripts/dev.js --sourcemap",
  ...
}

然后我们在终端执行

pnpm run dev

终端如果显示 watching: packages/vue/dist/vue.global.js 就说明执行成功了，而且他会开启实时监听，我们目前是不需要的，所以 ctrl c 关闭就好

这时候我们看到 packages/vue 目录下多了一个 dist目录，里面有两个文件 vue.global.js 和 vue.global.js.map 就说明我们打包成功了。

我们打包好文件后，就可以开始调试了，为了方便启动例子，我们可以安装一个 vscode 的插件 Live Server，这个插件可以快速使用web服务器打开文件。安装完后鼠标右键会出现一个按钮。 Open with Live Server

准备好工具后，我们打开 packages/vue/examples 目录，这个目录里面存放了一些官方的例子

我们随便选择一个 composition/tree.html 文件，右键点击 Open with Live Server打开后，在浏览器上就可以看到这个应用。

然后我们可以使用 Chrome 的开发者工具，在Sources 里面找到我们需要打断点的地方，通过断点的Step into next 等功能，能够很方便的找到这个断点的整个流程。

调试对于看源码来说是必不可少的工具，我们必须学会断点的使用，和了解开发者工具中一些断点信息，比如调用栈Call Stack 就给我们展示了调用这个方法前的一些方法。