資訊專欄INFORMATION COLUMN
摘要：由于工作中經(jīng)常使用調(diào)試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發(fā)，想著我學(xué)習(xí)源碼是否也可以通過調(diào)試工具呢因此，誕生了這篇文章來記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會(huì)寫成一個(gè)系列。
由于工作中經(jīng)常使用chrome調(diào)試工具來定位問題，覺著這東西真的挺好用。突然有一天受到啟發(fā)，想著：“我學(xué)習(xí)源碼是否也可以通過調(diào)試工具呢？” 因此，誕生了這篇文章來記錄我的一些學(xué)習(xí)成果，后續(xù)應(yīng)該會(huì)寫成一個(gè)系列。閱讀源碼的一些常見方式
這里列舉一些閱讀源碼的一些常見方式：
直接從github上查看某一個(gè)版本的源碼，針對(duì)某些功能的實(shí)現(xiàn)進(jìn)行剖析
從第一個(gè)commit開始看
上面是我所知的一些閱讀源碼的常見方式，但是以上兩種方式，無論是哪一種，都需要對(duì)flow稍微熟悉一些，不然看著多別扭（當(dāng)然啦，如果你直接下載源碼到本地轉(zhuǎn)碼以后慢慢看，那只能當(dāng)我沒說）；同時(shí)，從第一個(gè)commit開始看的話未免太消磨時(shí)間，相信在座的各位都不是很愿意。
那使用chrome調(diào)試工具看源碼都有啥優(yōu)點(diǎn)呢？
chrome調(diào)試工具里的代碼都是經(jīng)過轉(zhuǎn)碼的，閱讀成本相對(duì)較低
打下斷點(diǎn)之后可以清晰的看到某個(gè)功能的實(shí)現(xiàn)步驟，跟直接閱讀源碼相比，不用來回切換文件夾，從而能更加集中自己的注意力
進(jìn)入正題說起Vue，首先必不可少的就是講Vue的生命周期了，不僅是面試的時(shí)候經(jīng)常會(huì)被問到這個(gè)問題，開發(fā)的時(shí)候也經(jīng)常會(huì)在生命周期這里遇到一些坑
執(zhí)行順序Vue 中常見的生命周期及對(duì)應(yīng)順序： beforeCreate —> created —> beforeMount —> mounted —> beforeDestroy —> destroyed，官網(wǎng)有張則很清晰的描繪了這個(gè)過程：
接下來讓我們?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嗎？顯然不是！
通過兩次執(zhí)行，我們可以看到兩次vm對(duì)象是由不同的構(gòu)造函數(shù)new出來的，一個(gè)是Vue，另外一個(gè)則是VueComponent
通過觀察右邊的調(diào)用堆?？梢园l(fā)現(xiàn)的確是存在VueComponent這個(gè)構(gòu)造函數(shù)的，具體是用來干嘛的我們先不深究。怎么去定位到這個(gè)問題呢？首先先在VueComponent這里打下一個(gè)斷點(diǎn)，重新刷新瀏覽器并查看右邊的調(diào)用堆棧
原來，兩次beforeCreate鉤子函數(shù)分別是Vue本身和VueRouter執(zhí)行的（終于破案了...)
除了這幾個(gè)鉤子函數(shù)以外，還有beforeDestroy跟destroyed這兩個(gè)鉤子，顧名思義，應(yīng)該是頁(yè)面銷毀的時(shí)候才會(huì)執(zhí)行，所以我們?cè)谏厦娲蛄藬帱c(diǎn)進(jìn)去也沒有看到這兩個(gè)鉤子觸發(fā)了。
另外還有beforeUpdate跟updated兩個(gè)鉤子，字面意思就是“更新前”與“更新后”嘛。同樣，上面的斷點(diǎn)也沒有在這里停下來。為了驗(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鉤子，放開這個(gè)斷點(diǎn)以后，頁(yè)面數(shù)據(jù)刷新，斷點(diǎn)停在了updated這個(gè)鉤子函數(shù)中。
最后，我們回過頭來再看這張圖片，是不是對(duì)整個(gè)生命周期的流程清晰多了呢？
未完待續(xù)...
掃描下方的二維碼或搜索「tony老師的前端補(bǔ)習(xí)班」關(guān)注我的微信公眾號(hào)，那么就可以第一時(shí)間收到我的最新文章。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101530.html
摘要：所有的高階抽象組件是通過定義選項(xiàng)來聲明的。所以一般在生命周期或者中，需要用實(shí)例的方法清除可當(dāng)你有多個(gè)時(shí)，就需要重復(fù)性勞動(dòng)銷毀這件事兒。更多的配置請(qǐng)看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄 接口模塊處理 Vue組件動(dòng)態(tài)注冊(cè) 頁(yè)面性能調(diào)試：Hiper Vue高階組件封裝 性能優(yōu)化：eventBus封裝 webpack插件：真香 本文項(xiàng)目基于Vue-Cli3，想知...
摘要：根據(jù)調(diào)試工具看源碼之組件通信一根據(jù)調(diào)試工具看源碼之組件通信一在平時(shí)的業(yè)務(wù)開發(fā)中，相信在座的各位沒少用過組件通信?？赐瓯疚目梢詭椭懔私饨M件的通信方式及原理，從而進(jìn)一步加深對(duì)的理解，遠(yuǎn)離工程師的行列。 根據(jù)調(diào)試工具看Vue源碼之組件通信（一）## 根據(jù)調(diào)試工具看Vue源碼之組件通信（一） 在平時(shí)的業(yè)務(wù)開發(fā)中，相信在座的各位沒少用過組件通信。然而，對(duì)于一些新手/業(yè)務(wù)熟手來說，不懂技術(shù)原理往...
摘要：字段由腳本命令組成的字典，這些命令運(yùn)行在包的各個(gè)生命周期中。在打包過程中，如果遇到字段會(huì)優(yōu)先使用字段表示的路徑下的文件，如果不存在，則用字段表示的作為入口，并按照的規(guī)范打包。其中還分析了文件中字段和字段的不同以及和兩個(gè)字段的區(qū)別。 所有用npm下載的包或者要上傳至npm的模塊都會(huì)有一個(gè)package.json文件，這個(gè)文件總是存在于模塊(或者包)的根目錄下，這個(gè)文件到底是干嘛的，現(xiàn)在就...
摘要：官方定義類型詳細(xì)計(jì)算屬性將被混入到實(shí)例中。所有和的上下文自動(dòng)地綁定為實(shí)例計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。注意，如果某個(gè)依賴比如非響應(yīng)式屬性在該實(shí)例范疇之外，則計(jì)算屬性是不會(huì)被更新的。 官方定義 類型：{ [key: string]: Function | { get: Function, set: Function } } 詳細(xì)：計(jì)算屬性將被混入到 V...
閱讀 933·2021-11-19 11:29
閱讀 3409·2021-09-26 10:15
閱讀 3133·2021-09-22 10:02
閱讀 2508·2021-09-02 15:15
閱讀 2025·2019-08-30 15:56
閱讀 2491·2019-08-30 15:54
閱讀 3037·2019-08-29 16:59
閱讀 707·2019-08-29 16:20
