vue的生命週期幾個階段

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

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

生命週期就是元件從創建到銷毀的整個過程。 也就是從開始創建、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue 的生命週期

生命週期鉤子函數就是在生命週期某個時間點自動觸發的函數,作用是在特定的時間點,可以執行特定的操作。

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

先來官方的圖鎮大樓:

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

一、初始化階段

1. beforeCreate (建立前)

        在實例初始化之後，資料觀測(data observer) 和event/watcher 事件配置之前被呼叫。

        即此時vue（元件）物件被建立了，但vue物件的屬性尚未綁定，如data屬性，computed屬性還沒有綁定，也就是沒有值。

2. created (創建後)

        當元件執行個體建立完成後自動觸發,vue物件的屬性有值了，但是DOM還沒有生成，$el屬性還不存在。此時有資料了,一般會在這個鉤子函數中進行資料的取得,但是這個時候dom結構還沒有解析，所以無法操作dom。

二、掛載階段

#3. beforeMount (載入前)

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

4. mounted (載入後)

        在 mounted # 階段,vue 執行個體掛載完成, data.message 成功渲染。 即：此時已經把資料依據掛載到了頁面上，所以，頁面上能夠看到正確的資料了。

一般來說，我們在此處發送非同步請求（ajax，fetch，axios等），獲取伺服器上的數據，顯示在DOM。

三、更新階段

#5. beforeUpdate (更新前)

        在資料更新時調用，vue（組件）物件對應的dom中的內部（innerHTML）尚未改變,這裡適合在更新之前訪問,現有的DOM，例如手動移除已添加的事件監聽器。此鉤子在伺服器端渲染期間不會被調用，因為只有初次渲染會在服務端進行。

6. updated (更新)

        由於資料變更導致的虛擬DOM 重新渲染並打補丁，在這之後會呼叫該鉤子。

四、銷毀階段

#7. #beforeDestroy#(銷毀前)

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

期間不被呼叫。

8. destroyed (銷毀後)

        Vue 執行個體銷毀後呼叫。呼叫後，Vue 實例所指示的所有東西都會解綁定，所有

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

不被呼叫。

五、剩餘不常用的鉤子函數

        剩餘的三個鉤子函數,用的比較少,了解一下就行了。

9. activated  (元件啟動時)

        keep-alive 元件啟動時呼叫。該鉤子在伺服器端渲染期間不被調用。

10. deactivated  (元件失去活性)

##        

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

11. errorCaptured（2.5.0 新增） (擷取到錯誤時)

        

#當擷取一個來自子孫組件的錯誤時被呼叫。此鉤子會收到三個參數：錯誤物件、發生錯誤的元件實例 以及一個包含錯誤來源資訊的字串。此鉤子可以傳回 false 以防止該錯誤繼續向上傳播。

【相關推薦：

vuejs影片教學、web前端開發】

以上是vue的生命週期幾個階段的詳細內容。更多資訊請關注PHP中文網其他相關文章！