聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時候觸發(fā)

更新時間：2022年04月26日 15:27:39 作者：kobezzZ

這篇文章主要介紹了聊聊vue生命周期鉤子函數(shù)有哪些，分別什么時候觸發(fā)？具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue生命周期鉤子函數(shù)

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

主要包括以下4個階段：創(chuàng)建，掛載，更新，銷毀

創(chuàng)建前：beforeCreate, 創(chuàng)建后：created
掛載前：beforeMount, 掛載后：mounted
更新前：beforeUpdate, 更新后：updated
銷毀前：beforeDestroy, 銷毀后：destroyed

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

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

actived 實例激活
deactived 實例失效

以下為詳解版

大家理解就ok：

生命周期鉤子函數(shù)（11個）Function（類型），標(biāo)注藍色的那個是屬于類型的意思。

beforeCreate Function 在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
created Function 在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount Function 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted Function el 被新創(chuàng)建的 vm.el 替換，并掛載到實例上去之后調(diào)用該鉤子。如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。
beforeUpdate Function 數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因為只有初次渲染會在服務(wù)端進行。
updated Function 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。
activated Function keep-alive 組件激活時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
deactivated Function keep-alive 組件停用時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy Function 實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
destroyed Function Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
errorCaptured（2.5.0+ 新增） (err: Error, vm: Component, info: string) => ?boolean 當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用。此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。

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

activated

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

mounted

指的是實例被掛載后調(diào)用，如果沒有keep-alive每次切回來該組件都會觸發(fā)一次，但是keep-alive會緩存不活動的組件實例，那么可以說他只會觸發(fā)一次。所以往往一些數(shù)據(jù)的請求要在這寫一次請求，在activated里寫一次請求，保證你浪蕩回來還能請求到新的數(shù)據(jù)。