如何debug Vue源码

1.首先用Vue-cli或者直接构建webpack引入带compile 版本的Vue。让vue项目可以跑起来。项目可以很简单，最主要是跑起来即可

2.其次，查看webpack  alias 配置：

这里说明我们在import vue的时候，引入的vue源文件是在哪里：从webpack配置中可以看出，vue是引入node_modules的Vue-->dist-->vue.esm.js 这个文件，打开这个文件，然后在你想要调试的地方写入debugger

举个栗子：比如我要查看Vue function构建vue实例到底经过哪些过程，可以在这里打个debugger

然后刷新网页，就会出现调试面板了：

然后想怎么调试，单步调试还是多步调试都可以。可以看到源码是怎么执行的。这样便于理解源码，阅读源码的思路。

 

通过调试，我看到了vue实例初始化的最后一步是mounted

然后我想看$mount函数是怎么实现的，于是就搜索vue.esm.js的这个函数。我们知道vm.$mount实际上就是

Vue.prototype.$mount，这个方法在vue.esm.js里面搜索到是这样的：

可以看到 mountComponent是一个关键方法。于是就接下看mountComponent 做了什么。

如果还不确信，可以在mountComponent函数里面进行改写等操作，进一步理解源码的意思。

举个栗子：

然后可以看到网页有dom出来的时候，控制台也打印了这句。

总结：

1.源码不要一头扎进去读，而是先多步调试，知道流程。想看什么部分就debugger哪部分。然后想看详细的地方，可以改写代码，看效果，进一步理解。最后构建出思维导图。串起来，总结，或者把核心代码拿出来自己玩一个简单的demo再次复习。