Vue2.x 源码学习（笔记）- debugger 源码

客官°小女子只卖身不卖艺 2022-12-28 12:47 188阅读 0赞

## 使用方向 ##

最近在学习 vue.js 的源码，主要是通过 [Vue.js 技术揭秘][Vue.js] 官方文档，但是都是文字描述和代码片段，很难和我们实际项目中的步骤和操作联系起来，所以尝试 `debugger` 源码，配合文档描述，进而学习 `new Vue`、`createElement` 等的具体操作流程。

## 源码区别 ##

发现从 [vue.js 官网][vue.js] `clone` 的代码和从 [Vue.js 技术揭秘][Vue.js] 中 `clone` 的代码 目录 部分不同。

**[vue.js 官网][vue.js 1]**

![在这里插入图片描述][20201217112225372.png]

**[Vue.js 技术揭秘][Vue.js 1]**

![在这里插入图片描述][2020121711252436.png]

其实内容是一样的，个人理解是：一个为了更好的学习源码，文件目录精简，一个是为了提供学习`vue`的入门知识，包含了示例等。

## Vue.js 官网下载 debugger ##

注：此部分借鉴自： [vue如何debugger源码][vue_debugger]

1.  给 `scripts/config.js` 添加 `sourcemap: true`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]
2.  修改完成后，执行下 `npm run dev`，在`example`中的代码中，引入`./dist/vue.js`代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

1.  在源码中添加debugger，会有对应的断点

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

执行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]

## 总结 ##

个人感觉这种一边 `debugger` ，一边阅读文档的理解会深入一点。

[Vue.js]: https://ustbhuangyi.github.io/vue-analysis/v2/prepare/
[vue.js]: https://cn.vuejs.org/index.html
[vue.js 1]: https://github.com/vuejs/vue
[20201217112225372.png]: /images/20221120/932b2341d1824beaafaa617668230a77.png
[Vue.js 1]: https://github.com/ustbhuangyi/vue-analysis
[2020121711252436.png]: https://img-blog.csdnimg.cn/2020121711252436.png
[vue_debugger]: http://www.bubuko.com/infodetail-3284218.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201217114045496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201217114312397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201217114358739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201217114458787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw==,size_16,color_FFFFFF,t_70