根據(jù)調(diào)試工具看Vue源碼之生命周期（一）

My_Oh_My 發(fā)布于2019-08-23 15:07 / 2105人閱讀

摘要：由于工作中經(jīng)常使用調(diào)試工具來(lái)定位問(wèn)題，覺(jué)著這東西真的挺好用。突然有一天受到啟發(fā)，想著我學(xué)習(xí)源碼是否也可以通過(guò)調(diào)試工具呢因此，誕生了這篇文章來(lái)記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會(huì)寫(xiě)成一個(gè)系列。

由于工作中經(jīng)常使用chrome調(diào)試工具來(lái)定位問(wèn)題，覺(jué)著這東西真的挺好用。突然有一天受到啟發(fā)，想著：“我學(xué)習(xí)源碼是否也可以通過(guò)調(diào)試工具呢？”  因此，誕生了這篇文章來(lái)記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會(huì)寫(xiě)成一個(gè)系列。

閱讀源碼的一些常見(jiàn)方式

這里列舉一些閱讀源碼的一些常見(jiàn)方式：

直接從github上查看某一個(gè)版本的源碼，針對(duì)某些功能的實(shí)現(xiàn)進(jìn)行剖析

從第一個(gè)commit開(kāi)始看

上面是我所知的一些閱讀源碼的常見(jiàn)方式，但是以上兩種方式，無(wú)論是哪一種，都需要對(duì)flow稍微熟悉一些，不然看著多別扭（當(dāng)然啦，如果你直接下載源碼到本地轉(zhuǎn)碼以后慢慢看，那只能當(dāng)我沒(méi)說(shuō)）；同時(shí)，從第一個(gè)commit開(kāi)始看的話未免太消磨時(shí)間，相信在座的各位都不是很愿意。

那使用chrome調(diào)試工具看源碼都有啥優(yōu)點(diǎn)呢？

chrome調(diào)試工具里的代碼都是經(jīng)過(guò)轉(zhuǎn)碼的，閱讀成本相對(duì)較低

打下斷點(diǎn)之后可以清晰的看到某個(gè)功能的實(shí)現(xiàn)步驟，跟直接閱讀源碼相比，不用來(lái)回切換文件夾，從而能更加集中自己的注意力

進(jìn)入正題

說(shuō)起Vue，首先必不可少的就是講Vue的生命周期了，不僅是面試的時(shí)候經(jīng)常會(huì)被問(wèn)到這個(gè)問(wèn)題，開(kāi)發(fā)的時(shí)候也經(jīng)常會(huì)在生命周期這里遇到一些坑

執(zhí)行順序

Vue 中常見(jiàn)的生命周期及對(duì)應(yīng)順序： beforeCreate —> created —> beforeMount —> mounted —> beforeDestroy —> destroyed，官網(wǎng)有張則很清晰的描繪了這個(gè)過(guò)程：

接下來(lái)讓我們?cè)谏厦鎸?duì)應(yīng)的鉤子函數(shù)里打下一個(gè)斷點(diǎn)

我們可以發(fā)現(xiàn)，beforeCreate —> created —> beforeMount —> mounted 這幾個(gè)鉤子函數(shù)都是挨個(gè)執(zhí)行的，文檔誠(chéng)不我欺！
但是細(xì)心的同學(xué)可以發(fā)現(xiàn)，beforeCreate這個(gè)鉤子函數(shù)居然執(zhí)行了兩次！為什么？是Vue的bug嗎？顯然不是！

通過(guò)兩次執(zhí)行，我們可以看到兩次vm對(duì)象是由不同的構(gòu)造函數(shù)new出來(lái)的，一個(gè)是Vue，另外一個(gè)則是VueComponent
通過(guò)觀察右邊的調(diào)用堆棧可以發(fā)現(xiàn)的確是存在VueComponent這個(gè)構(gòu)造函數(shù)的，具體是用來(lái)干嘛的我們先不深究。怎么去定位到這個(gè)問(wèn)題呢？首先先在VueComponent這里打下一個(gè)斷點(diǎn)，重新刷新瀏覽器并查看右邊的調(diào)用堆棧

原來(lái)，兩次beforeCreate鉤子函數(shù)分別是Vue本身和VueRouter執(zhí)行的（終于破案了...)

除了這幾個(gè)鉤子函數(shù)以外，還有beforeDestroy跟destroyed這兩個(gè)鉤子，顧名思義，應(yīng)該是頁(yè)面銷(xiāo)毀的時(shí)候才會(huì)執(zhí)行，所以我們?cè)谏厦娲蛄藬帱c(diǎn)進(jìn)去也沒(méi)有看到這兩個(gè)鉤子觸發(fā)了。
另外還有beforeUpdate跟updated兩個(gè)鉤子，字面意思就是“更新前”與“更新后”嘛。同樣，上面的斷點(diǎn)也沒(méi)有在這里停下來(lái)。為了驗(yàn)證它們之間的執(zhí)行順序，我在這個(gè)項(xiàng)目里面加了幾句代碼：

data () {
    return {
        lists: [ 1, 2, 3, 4 ]
    }
},
methods: {
    handleClick () {
        let len = this.lists.length

        this.lists.push(this.lists[len - 1] + 1)
    }
}

然后刷新頁(yè)面，點(diǎn)擊這個(gè)按鈕可以看到執(zhí)行了beforeUpdate鉤子，放開(kāi)這個(gè)斷點(diǎn)以后，頁(yè)面數(shù)據(jù)刷新，斷點(diǎn)停在了updated這個(gè)鉤子函數(shù)中。

最后，我們回過(guò)頭來(lái)再看這張圖片，是不是對(duì)整個(gè)生命周期的流程清晰多了呢？

未完待續(xù)...
掃描下方的二維碼或搜索「tony老師的前端補(bǔ)習(xí)班」關(guān)注我的微信公眾號(hào)，那么就可以第一時(shí)間收到我的最新文章。