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

這篇文章為大家帶來了關於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 以防止該錯誤繼續向上傳播。

生命週期mounted和activated使用、踩坑 

#activated

說到activated不得不提到keep-alive，你切換出去又切出來會調用它。 （你可以理解為生命週期鉤子函數，用法也一樣）

mounted

指的是實例被掛載後調用，如果沒有keep-alive每次切回來該元件都會觸發一次，但是keep-alive會快取不活動的元件實例，那麼可以說他只會觸發一次。所以往往一些資料的請求要在這寫一次請求，在activated裡寫一次請求，保證你浪蕩回來還能請求到新的資料。

踩坑

1.這裡有個關鍵字是實例，也就是說如果你用了$refs，你就得注意了。

2.mounted先執行，第一次進入時候兩個一起執行

附註

keep-alive的運用非常非常非常多。

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

以上是聊聊vue生命週期鉤子函數有哪些以及什麼時候觸發的詳細內容。更多資訊請關注PHP中文網其他相關文章！