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

My_Oh_My 發布于2019-08-23 15:07 / 2100人閱讀

摘要：由于工作中經常使用調試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發，想著我學習源碼是否也可以通過調試工具呢因此，誕生了這篇文章來記錄我的一些學習成果，后續應該會寫成一個系列。

由于工作中經常使用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這個鉤子函數中。

最后，我們回過頭來再看這張圖片，是不是對整個生命周期的流程清晰多了呢？

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

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101530.html

「Vue實踐」武裝你的前端項目

摘要：所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中，需要用實例的方法清除可當你有多個時，就需要重復性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄接口模塊處理 Vue組件動態注冊頁面性能調試：Hiper Vue高階組件封裝性能優化：eventBus封裝 webpack插件：真香本文項目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 評論0 收藏0
根據調試工具看Vue源碼之組件通信（一）

摘要：根據調試工具看源碼之組件通信一根據調試工具看源碼之組件通信一在平時的業務開發中，相信在座的各位沒少用過組件通信。看完本文可以幫助你了解組件的通信方式及原理，從而進一步加深對的理解，遠離工程師的行列。根據調試工具看Vue源碼之組件通信（一）## 根據調試工具看Vue源碼之組件通信（一）在平時的業務開發中，相信在座的各位沒少用過組件通信。然而，對于一些新手/業務熟手來說，不懂技術原理往...

付倫 2019-08-23 15:30 評論0 收藏0
package.json文件各字段的說明

摘要：字段由腳本命令組成的字典，這些命令運行在包的各個生命周期中。在打包過程中，如果遇到字段會優先使用字段表示的路徑下的文件，如果不存在，則用字段表示的作為入口，并按照的規范打包。其中還分析了文件中字段和字段的不同以及和兩個字段的區別。所有用npm下載的包或者要上傳至npm的模塊都會有一個package.json文件，這個文件總是存在于模塊(或者包)的根目錄下，這個文件到底是干嘛的，現在就...

yzd 2019-08-23 13:50 評論0 收藏0
根據調試工具看Vue源碼之computed（一）

摘要：官方定義類型詳細計算屬性將被混入到實例中。所有和的上下文自動地綁定為實例計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴比如非響應式屬性在該實例范疇之外，則計算屬性是不會被更新的。官方定義類型：{ [key: string]: Function | { get: Function, set: Function } } 詳細：計算屬性將被混入到 V...

aisuhua 2019-08-26 13:34 評論0 收藏0