「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」
前置内容
为什么学 Vue 源码？
- 工作中装比
- 应付面试
- 加深对
Vue的理解 - 增强解决问题的能力
- 增强阅读源码的能力
如何避免陷入源码的海洋？
找到一条主线
比如写上一段简单地 vue3 代码，接下来思考如何跑起来的？
- createApp
- app.mount()
- 数据什么时候发生了改变
- 页面如何更新的
......
从主线发散分支
当主线学习完成后，还有很多其他的分支问题，细节问题没有搞懂，这个时候，我们就需要从主线发散新的问题，带着问题去源码中找答案。
造轮子
当我们把 vue3 的源码基本梳理完成后，就可以尝试写一个 mini-vue 了，在这个过程中，大概率还会遇到新的问题，再去尝试解决，当我们把 mini-vue 写出来之后，就形成了一个完整的输出。这个过程，会把之前学习的知识点系统的串联在一起，形成一个完成的体系。
费曼学习法
当我们尝试把学到的知识讲给别人的时候，过程中就会发现有的问题好像理解的还不够透彻，有些点之间的衔接好像没有那么丝滑。
所以这个过程会倒逼我们继续巩固之前不扎实，没搞透的点，当我们可以把相关的知识完整的转述给他人的话，就说明是真的学到了。
同时这样一个做输出的过程，也会帮助到需要相关知识的小伙伴，既帮助了他人，同时他人的反馈也会指出自己的不足以及给到自己正向的反馈，可谓一举四得。
环境搭建
clone 源码
目前 vue3 的仓库在这个地址vue-next，小伙伴们可以到这个地址克隆仓库。
安装依赖
进入项目目录，打开终端，这里要注意的是 Vue 3.2 之后的包管理切换到了 pnpm，所以这里要使用 pnpm install。如果你还没有安装 pnpm，需要先全局安装一下。
打包
因为我们目前是为了学习源码，所以我们希望打包的时候，使用 dev 的方式打包，同时为了调试的时候可以看到源码，所以我们在 dev 的命令中加上 --sourcemap。
"dev": "node scripts/dev.js --sourcemap" 复制代码
接下来，我们运行 pnpm dev。
当看到如下输出，说明打包已经完成，并且处于 waiting for changes 状态，也就是如果文件发生修改，会重新进行打包。
打包输出的文件就在 packages/vue/dist/vue.global.js。
启动服务
package.json 中有一个 serve 命令，可以帮我们启动服务。 终端中运行 pnpm serve（之前的打包服务可以终止，也可以新开一个终端窗口运行该命令）。接下来，终端中显示如下界面，说明服务启动成功。
打开对应的本地服务地址
接下来打开 packages/vue/examples 目录，这里面会有一些 vue 给我们准备好的经典案例。
比如我们打开 composition/todomvc，这里面就是一个经典的 todolist 案例。此时打开控制台就可以进行调试了~
源码调试
打开 todomvc 页面后，打开 chrome 控制台 source 页签，通过 cmd+p 快捷键打开 todomvc 对应文件，这里我们以 Vue 的起始点 createApp 为例，找到 createApp 方法的调用，打上断点。
接下来刷新页面，脚本就会在断点处停止。此时点击右侧下箭头
就可以进入 createApp 方法定义的文件 packages/runtime-dom/src/index.ts。
并定位到 createApp 方法定义的位置。
这样，如果我们想看 createApp 是怎么实现的，就可以去 packages/runtime-dom/src/index.ts 文件中阅读相关源码了~ 😁
以上就是本文的全部内容了，喜欢的话点个赞吧！😜
会持续输出 Vue 源码学习文章，感兴趣的话点个关注吧！😁
如有任何问题或建议，欢迎留言讨论！
