有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 (銷毀後)
剩餘的三個鉤子函數,用的比較少,了解一下就行了。
9. activated (元件啟動時)
keep-alive 元件啟動時呼叫。該鉤子在伺服器端渲染期間不被調用。
10. deactivated (元件失去活性)
###keep-alive 元件停用時調用。該鉤子在伺服器端渲染期間不被調用。
11. errorCaptured(2.5.0 新增) (擷取到錯誤時)
#當擷取一個來自子孫組件的錯誤時被呼叫。此鉤子會收到三個參數:錯誤物件、發生錯誤的元件實例 以及一個包含錯誤來源資訊的字串。此鉤子可以傳回 false 以防止該錯誤繼續向上傳播。
【相關推薦:以上是vue的生命週期幾個階段的詳細內容。更多資訊請關注PHP中文網其他相關文章!