這篇文章主要講解了“vue的生命周期有哪些階段”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue的生命周期有哪些階段”吧！

創(chuàng)新互聯(lián)主營特克斯網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),特克斯h5小程序定制開發(fā)搭建,特克斯網(wǎng)站營銷推廣歡迎特克斯等地區(qū)企業(yè)咨詢

有4大階段：1、初始化階段，包含beforeCreate（創(chuàng)建前）和created（創(chuàng)建后）兩個(gè)小階段；2、掛載階段，包含beforeMount（載入前）和mounted（載入后）兩個(gè)小階段；3、更新階段，包含beforeUpdate（更新前）和updated（更新后）兩個(gè)小階段；4、銷毀階段，beforeDestroy（銷毀前）和destroyed（銷毀后）兩個(gè)小階段。

生命周期就是組件從創(chuàng)建到銷毀的整個(gè)過程。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載 Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這 是 Vue 的生命周期

生命周期鉤子函數(shù)就是在生命周期某個(gè)時(shí)間點(diǎn)自動(dòng)觸發(fā)的函數(shù),作用是在特定的時(shí)間點(diǎn),可以執(zhí)行特定的操作。

Vue生命周期 總共有 11 個(gè),一般又分為常用和不常用兩部分,那我們先來談一談常用的階段。

先來官方的圖鎮(zhèn)樓:

我們常用的又可以分為4大階段,8個(gè)方法

一、初始化階段

1. beforeCreate (創(chuàng)建前)

       在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。

即此時(shí)vue（組件）對(duì)象被創(chuàng)建了，但是vue對(duì)象的屬性還沒有綁定，如data屬性，computed屬性還沒有綁定，即沒有值。

2. created (創(chuàng)建后)

當(dāng)組件實(shí)例創(chuàng)建完畢之后自動(dòng)觸發(fā),vue對(duì)象的屬性有值了，但是DOM還沒有生成，$el屬性還不存在。此時(shí)有數(shù)據(jù)了,一般會(huì)在這個(gè)鉤子函數(shù)中進(jìn)行數(shù)據(jù)的獲取,但是這個(gè)時(shí)候dom結(jié)構(gòu)還沒有解析，所以無法操作dom。

二、掛載階段

3. beforeMount (載入前)

       在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。在這個(gè)階段,vue實(shí)例的 $el 和 data都初始化了,此時(shí) this.$el有值,但還是掛載在之前的虛擬的 dom 節(jié)點(diǎn),data.message還未替換,數(shù)據(jù)還沒有掛載到頁面上。

4. mounted (載入后)

在 mounted 階段,vue 實(shí)例掛載完成, data.message 成功渲染。即：此時(shí)已經(jīng)把數(shù)據(jù)依據(jù)掛載到了頁面上，所以，頁面上能夠看到正確的數(shù)據(jù)了。

一般來說，我們?cè)诖颂幇l(fā)送異步請(qǐng)求（ajax，fetch，axios等），獲取服務(wù)器上的數(shù)據(jù)，顯示在DOM里。

三、更新階段

5. beforeUpdate (更新前)

       數(shù)據(jù)更新時(shí)調(diào)用，vue（組件）對(duì)象對(duì)應(yīng)的dom中的內(nèi)部（innerHTML）還沒有變,這里適合在更新之前訪問 ,現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。

6. updated (更新后)

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。

四、銷毀階段

7. beforeDestroy (銷毀前)

       實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。該鉤子在服務(wù)器端渲染

期間不被調(diào)用。

8. destroyed (銷毀后)

       Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有

的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間

不被調(diào)用。

五、剩余不常用的鉤子函數(shù)

       剩余的三個(gè)鉤子函數(shù),用的比較少,了解一下就行了。

9. activated  (組件激活時(shí))

       keep-alive 組件激活時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

10. deactivated  (組件失活時(shí))

keep-alive 組件停用時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

11. errorCaptured（2.5.0+ 新增） (捕獲到錯(cuò)誤時(shí))

當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例 以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。

感謝各位的閱讀，以上就是“vue的生命周期有哪些階段”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue的生命周期有哪些階段這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！