Vue2.x 源码学习(笔记)- debugger 源码

使用方向

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

源码区别

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

vue.js 官网

在这里插入图片描述

Vue.js 技术揭秘

在这里插入图片描述

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

Vue.js 官网下载 debugger

注:此部分借鉴自: vue如何debugger源码

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

在这里插入图片描述

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

在这里插入图片描述

执行结果:

在这里插入图片描述

总结

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

猜你喜欢

转载自blog.csdn.net/lb1135909273/article/details/111311202