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

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

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

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

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

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

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

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

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

actived 實(shí)例激活
deactived 實(shí)例失效

以下為詳解版

大家理解就ok：

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

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

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

activated

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

mounted

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