引言
感觉荒废了有一段时间了，从现在开始我会陆续的进行vue3源码相关的学习，来让自己回到技术提升的正轨上。首先先说明下学习vue3源码有哪些好处，我们可以更加深入理解框架机制，比如响应式系统、虚拟DOM等。然后，提升解决问题的能力，遇到bug时能更快定位。还有，可以学习到优秀的代码结构和设计模式，这对自己的编程能力有帮助。 另外，可能用户想进阶为高级开发者或架构师，了解源码能帮助他设计更好的架构。同时，面试中源码问题常见，掌握这些可以增加竞争力。可能还需要提到社区贡献，参与开源项目。然后坏处呢，那就是比较难去理解掌握，需要花费较多的时间，让我相当这个探路鬼吧。
学习源码前学会如何调试源码是一个很重要的技能，我们可以动态观察执行流程，这比静态阅读更直观；验证理论猜测，通过断点查看实际数据流动；定位问题根源，特别是在遇到bug时；理解设计细节，比如响应式系统的依赖收集和触发；以及培养调试技能本身。接下来就让我们看看如何调试吧。
环境准备
调试vue源码我们只需要克隆一份git的源码
git clone https://github.com/vuejs/core.git
然后pnpm install一下，这个pnpm有不知道的同学可以自行搜索一下
pnpm install
接着运行 npm run dev
npm run dev
此时你会在终端下面看到这样子的提示，说明vue3源码已经被构建且此时你去编辑vue3源码中的文件进行保存，会实时的去编译
调试工具推荐
我觉得调试这种前端源码我们就用我们平时开发的时候用的chrome自带的devtool来调试就行了
调试步骤
上面我们说到了运行完npm run dev后源码就已经被构建在指定的目录下了，这个时候我们改怎么去打断点调试呢
首先我们要先新建一个我们要调试的源码
在packages/vue/examples下面新建一个debug文件夹并新建一个debugger.html的调试入口文件，如果大家不想自己去写，可以去这里下载一下放过来就行了pan.quark.cn/s/41d0a7168…
其实到这一步你离可以真正在源码里断点调试就很近了，我们可以先在文件管理器里用chrome浏览器打开我们新建的debugger.html文件，接着我们就可以在我们源码里想要断点的位置加上debugger，这里我就用createApp这个方法举例子了
加上断点后我们只需要打开开发者工具并刷新一下浏览器就可以看到断点在我们想要的地方停下了接下来我们就可以尽情的调试了，用最近很火的cursor来调试源码会更有效率哦，需要cursor相关文件的可以私我
总结与预告
我会尽量详细的记录我的学习过程，当然记录的周期很大程度上取决于我工作的强度，希望我能坚持并学完，还有在工作学习之余我们也应该考虑考虑副业相关的发展，我刚建了一个副业和前端交流群，有兴趣的小伙伴的私信我哦，我也很期待期待下一个的更新！
