由於工作中經常使用chrome調試工具來定位問題，覺着這東西真的挺好用。突然有一天受到啓發，想着：“我學習源碼是否也可以通過調試工具呢？” 因此，誕生了這篇文章來記錄我的一些學習成果，後續應該會寫成一個系列。
閱讀源碼的一些常見方式
這裏列舉一些閱讀源碼的一些常見方式：
- 直接從
github上查看某一個版本的源碼，針對某些功能的實現進行剖析 - 從第一個
commit開始看
上面是我所知的一些閱讀源碼的常見方式，但是以上兩種方式，無論是哪一種，都需要對flow稍微熟悉一些，不然看着多彆扭（當然啦，如果你直接下載源碼到本地轉碼以後慢慢看，那隻能當我沒說）；同時，從第一個commit開始看的話未免太消磨時間，相信在座的各位都不是很願意。
那使用chrome調試工具看源碼都有啥優點呢？
-
chrome調試工具裏的代碼都是經過轉碼的，閱讀成本相對較低 - 打下斷點之後可以清晰的看到某個功能的實現步驟，跟直接閱讀源碼相比，不用來回切換文件夾，從而能更加集中自己的注意力
進入正題
說起Vue，首先必不可少的就是講Vue的生命週期了，不僅是面試的時候經常會被問到這個問題，開發的時候也經常會在生命週期這裏遇到一些坑
執行順序
Vue 中常見的生命週期及對應順序： beforeCreate —> created —> beforeMount —> mounted —> beforeDestroy —> destroyed，官網有張則很清晰的描繪了這個過程：
接下來讓我們在上面對應的鉤子函數裏打下一個斷點
我們可以發現，beforeCreate —> created —> beforeMount —> mounted 這幾個鉤子函數都是挨個執行的，文檔誠不我欺！
但是細心的同學可以發現，beforeCreate這個鉤子函數居然執行了兩次！爲什麼？是Vue的bug嗎？顯然不是！
通過兩次執行，我們可以看到兩次vm對象是由不同的構造函數new出來的，一個是Vue，另外一個則是VueComponent
通過觀察右邊的調用堆棧可以發現的確是存在VueComponent這個構造函數的，具體是用來幹嘛的我們先不深究。怎麼去定位到這個問題呢？首先先在VueComponent這裏打下一個斷點，重新刷新瀏覽器並查看右邊的調用堆棧
原來，兩次beforeCreate鉤子函數分別是Vue本身和VueRouter執行的（終於破案了...)
除了這幾個鉤子函數以外，還有beforeDestroy跟destroyed這兩個鉤子，顧名思義，應該是頁面銷燬的時候纔會執行，所以我們在上面打了斷點進去也沒有看到這兩個鉤子觸發了。
另外還有beforeUpdate跟updated兩個鉤子，字面意思就是“更新前”與“更新後”嘛。同樣，上面的斷點也沒有在這裏停下來。爲了驗證它們之間的執行順序，我在這個項目裏面加了幾句代碼：
data () {
return {
lists: [ 1, 2, 3, 4 ]
}
},
methods: {
handleClick () {
let len = this.lists.length
this.lists.push(this.lists[len - 1] + 1)
}
}然後刷新頁面，點擊這個按鈕可以看到執行了beforeUpdate鉤子，放開這個斷點以後，頁面數據刷新，斷點停在了updated這個鉤子函數中。
最後，我們回過頭來再看這張圖片，是不是對整個生命週期的流程清晰多了呢？
未完待續...