vue3源码如何调试

617 阅读2分钟

首先要知道为什么要学习源码???

  1. 大家都会写业务代码,无法区分能力,会源码是实力的体现
  2. 面试需求,总会问底层的东西,快速筛选人才
  3. 内卷,一个岗位多个人求职,不乏有名校出生
  4. 加深对api理解,站在上帝视角去理解api的实现原理
  5. 一个好的赛车手,可以不需要懂车的构造,但是顶级赛车手,肯定是要懂得,我在驾驭车的过程中,应该怎么去开,才能发挥好它的最好的性能,什么时候加速,什么时候减速等等,同样的,在写代码中,你理解的好,代码自然写的就好。
  6. 增强解决问题的能力。
  7. 掌握一门真正傍身的技能,掌握学习源码的方法论,一旦你掌握了这门技能,学习其他源码也是手到擒来。

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 输入你想输入的字符串 就可以找到对应的文件