首先要知道为什么要学习源码???
- 大家都会写业务代码,无法区分能力,会源码是实力的体现
- 面试需求,总会问底层的东西,快速筛选人才
- 内卷,一个岗位多个人求职,不乏有名校出生
- 加深对api理解,站在上帝视角去理解api的实现原理
- 一个好的赛车手,可以不需要懂车的构造,但是顶级赛车手,肯定是要懂得,我在驾驭车的过程中,应该怎么去开,才能发挥好它的最好的性能,什么时候加速,什么时候减速等等,同样的,在写代码中,你理解的好,代码自然写的就好。
- 增强解决问题的能力。
- 掌握一门真正傍身的技能,掌握学习源码的方法论,一旦你掌握了这门技能,学习其他源码也是手到擒来。
vue3如何调试的?
vue3源码地址
workspace
使用pnpm install 反向安装
如果安装包比较慢 可以删除这个包 "puppeteer": "^10.0.0", 再重试
根目录下的package.json文件的scripts脚本小的dev属性 新增 --sourcemap
>> www.json是输出node在终端中的输出内容
"dev": "node scripts/dev.js --sourcemap >> www.json",
启动项目
/packages/vue/__tests__/test.html
1:在html文件内部引入vue.global.js 就可以调试源码啦
<script src="../dist/vue.global.js"></script>
写上一段最简单的代码,思考如何运行的,然后一点点的变复杂。
2:也可以使用 源码内部自带的调试案例
启动服务
pnpm serve
打开链接
http://localhost:5000/packages/vue/examples/composition/todomvc
打断点
快捷键:ctrl+g 输入数字就可以定位到某一行的代码; ctrl+t 输入你想输入的字符串 就可以找到对应的文件