這篇“vue生命周期鉤子函數(shù)及觸發(fā)時(shí)間是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue生命周期鉤子函數(shù)及觸發(fā)時(shí)間是什么”文章吧。

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、任縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

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

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

• 創(chuàng)建前：beforeCreate, 創(chuàng)建后：created

• 掛載前：beforeMount, 掛載后：mounted

• 更新前：beforeUpdate, 更新后：updated

• 銷毀前：beforeDestroy, 銷毀后：destroyed

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

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

• 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)開始，$el 屬性目前不可見。

• beforeMount Function 在掛載開始之前被調(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)聽器。該鉤子在服務(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í)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

• destroyed Function Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(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)求要在這寫一次請(qǐng)求，在activated里寫一次請(qǐng)求，保證你浪蕩回來(lái)還能請(qǐng)求到新的數(shù)據(jù)。

踩坑

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

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

附言

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

以上就是關(guān)于“vue生命周期鉤子函數(shù)及觸發(fā)時(shí)間是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。