首頁  >  文章  >  web前端  >  vue的生命週期幾個階段

vue的生命週期幾個階段

青灯夜游
青灯夜游原創
2022-12-21 18:09:088544瀏覽

有4個大階段:1、初始化階段,包含beforeCreate(創建前)和created(創建後)兩個小階段;2、掛載階段,包含beforeMount(載入前)和mounted(載入後)兩個小階段;3、更新階段,包含beforeUpdate(更新前)和updated(更新後)兩個小階段;4、銷毀階段,beforeDestroy(銷毀前)和destroyed(銷毀後)兩個小階段。

vue的生命週期幾個階段

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

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

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

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

先來官方的圖鎮大樓:

vue的生命週期幾個階段

 我們常用的又可以分成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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn