根據調試工具看Vue源碼之生命週期（一）

因爲工做中常用 chrome調試工具來定位問題，覺着這東西真的挺好用。忽然有一天受到啓發，想着：「我學習源碼是否也能夠經過調試工具呢？」 所以，誕生了這篇文章來記錄個人一些學習成果，後續應該會寫成一個系列。

閱讀源碼的一些常見方式

這裏列舉一些閱讀源碼的一些常見方式：

1. 直接從github上查看某一個版本的源碼，針對某些功能的實現進行剖析
2. 從第一個commit開始看

上面是我所知的一些閱讀源碼的常見方式，可是以上兩種方式，不管是哪種，都須要對flow稍微熟悉一些，否則看着多彆扭（固然啦，若是你直接下載源碼到本地轉碼之後慢慢看，那隻能當我沒說）；同時，從第一個commit開始看的話未免太消磨時間，相信在座的各位都不是很願意。

那使用chrome調試工具看源碼都有啥優勢呢？

1. chrome調試工具裏的代碼都是通過轉碼的，閱讀成本相對較低
2. 打下斷點以後能夠清晰的看到某個功能的實現步驟，跟直接閱讀源碼相比，不用來回切換文件夾，從而能更加集中本身的注意力

進入正題

提及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這個鉤子函數中。

最後，咱們回過頭來再看這張圖片，是否是對整個生命週期的流程清晰多了呢？

未完待續...
掃描下方的二維碼或搜索「tony老師的前端補習班」關注個人微信公衆號，那麼就能夠第一時間收到個人最新文章。