vue的生命周期有哪些階段

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

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

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

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

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

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

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

一、初始化階段

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

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

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

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

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

二、掛載階段

3. beforeMount (載入前)

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

4. mounted (載入后)

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

一般來說，我們在此處發(fā)送異步請求（ajax，fetch，axios等），獲取服務器上的數(shù)據(jù)，顯示在DOM里。

三、更新階段

5. beforeUpdate (更新前)

       數(shù)據(jù)更新時調用，vue（組件）對象對應的dom中的內部（innerHTML）還沒有變,這里適合在更新之前訪問 ,現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行。

6. updated (更新后)

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

四、銷毀階段

7. beforeDestroy (銷毀前)

       實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染

期間不被調用。

8. destroyed (銷毀后)

       Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有

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

不被調用。

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

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

9. activated  (組件激活時)

       keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。

10. deactivated  (組件失活時)

keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。

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

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

感謝各位的閱讀，以上就是“vue的生命周期有哪些階段”的內容了，經過本文的學習后，相信大家對vue的生命周期有哪些階段這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！