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)注藍(lán)色的那個是屬于類型的意思。

• beforeCreate Function 在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
• created Function 在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)， 屬性和方法的運(yùn)算，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 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因為只有初次渲染會在服務(wù)端進(jìn)行。
• updated Function 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會調(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ù)。

踩坑

1.這里有個關(guān)鍵詞是實例，也就是說如果你用了$refs，你就得注意了。

2.mounted先執(zhí)行，首次進(jìn)入時候兩個一起執(zhí)行

附言

keep-alive的運(yùn)用非常非常非常多。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。