如何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再次複習。