首頁 >web前端 >Vue.js >聊聊vue生命週期鉤子函數有哪些以及什麼時候觸發

聊聊vue生命週期鉤子函數有哪些以及什麼時候觸發

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB轉載: 2022-08-10 15:55:502800瀏覽

這篇文章為大家帶來了關於vue的相關知識，其中主要介紹了vue生命週期鉤子函數有哪些，分別什麼時候觸發，vue生命週期即為一個組件從出生到死亡的一個完整週期，下面一起來看看，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

vue生命週期鉤子函數

vue生命週期即為一個組件從出生到死亡的一個完整週期

#主要包括以下4個階段：創建，掛載，更新，銷毀

建立前：beforeCreate, 建立後：created
掛載前：beforeMount, 掛載後：mounted
更新前：beforeUpdate, 更新後：updated
銷毀前：beforeDestroy, 銷毀後：destroyed

我平時用的比較多的鉤了是created和mounted，created用於獲取後台數據，mounted用於dom掛載完後做一些dom操作,以及初始化插件等.beforeDestroy用戶清除定時器以及解綁事件等,

另外還新增了使用內置組件keep-alive 來緩存實例，而不是頻繁創建和銷毀(開銷大)

actived 實例啟動
deactived 實例失效

##以下為詳解版

大家理解就ok：

生命週期鉤子函數（11個）Function（型別），標註藍色的那個是屬於型別的意思。

beforeCreate Function 在實例初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。
created Function 在實例建立完成後立即被呼叫。在這一步，實例已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回呼。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount Function 在掛載開始之前被呼叫：相關的 render 函數會首次被呼叫。
mounted Function el 被新建立的 vm.el 替換，並掛載到實例上去之後呼叫該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被呼叫時 vm.$el 也在文檔內。
beforeUpdate Function 資料更新時調用，發生在虛擬 DOM 打補丁之前。這裡適合在更新之前存取現有的 DOM，例如手動移除已新增的事件監聽器。此鉤子在伺服器端渲染期間不會被調用，因為只有初次渲染會在服務端進行。
updated Function 由於資料變更導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。
activated Function keep-alive 元件啟動時呼叫。該鉤子在伺服器端渲染期間不被調用。
deactivated Function keep-alive 元件停用時呼叫。該鉤子在伺服器端渲染期間不被調用。
beforeDestroy Function 實例銷毀之前呼叫。在這一步，實例仍然完全可用。該鉤子在伺服器端渲染期間不被調用。
destroyed Function Vue 實例銷毀後呼叫。呼叫後，Vue 實例所指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。
errorCaptured（2.5.0 新增） (err: Error, vm: Component, info: string) => ?boolean 當擷取一個來自子孫元件的錯誤時被調用。此鉤子會收到三個參數：錯誤物件、發生錯誤的元件實例以及一個包含錯誤來源資訊的字串。此鉤子可以傳回 false 以防止該錯誤繼續向上傳播。