細說VueJS生命週期與鉤子函數應用詳解

這篇文章講述了VueJS的生命週期和其中鉤子函數的應用，大家對VueJS的生命週期和其中鉤子函數的應用不了解的話那麼我們就一起來看看這篇文章吧， 好了廢話少說進入正題吧

朋友你好！很幸運的，我的文章能夠被你看到，那麼此時你應該想對vuejs的生命週期有更為通俗的理解，以及想知道其中某些鉤子函數在實際開發中的應用場景，下面直接看圖吧。

1.vue的生命週期

#簡單的說生命週期就是事物從產生到消失的一個時間過程。那麼vue的生命週期就是從其被創建到銷毀的過程，其中包含了開始創建、初始化數據、編譯模板、掛載dom（渲染） ，渲染->更新->渲染、銷毀（卸載）等一系列過程。

那麼其中的鉤子函數都擔負著自己的職責，較為常用的就是created和mounted函數，可以在函數中寫出相關的業務邏輯。

2.鉤子函數

#beforeCreate

在實例初始化之後，資料觀測和事件

、生命週期初始化配置之前被呼叫。

created

#實例已經建立完成之後被呼叫。在這一步，實例已完成以下的配置：資料觀測，

屬性和方法

的運算，事件回呼。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount

#在掛載開始之前被調用：相關的render 函數首次被調用，此時有了虛擬DOM

。

mounted

#############el 被新建立的vm.$el 替換，並掛載到實例上去之後調用該鉤子，###渲染為真實DOM###。 ###############beforeUpdate################在資料更新之前時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。 ###############updated#########

由於資料變更導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。

當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。

值得注意的是：該鉤子在伺服器端渲染期間不被呼叫。

beforeDestroy

#實例銷毀之前呼叫。此時，實例仍然是可用的。

destroyed

#vue 實例銷毀後呼叫。呼叫後，vue 實例所指示的所有東西都會解綁，所有的事件監聽器會被卸載移除，所有的子實例也會被銷毀。 

值得注意的是：該鉤子在伺服器端渲染期間不會被呼叫。

相關推薦：

#Vuejs搜尋符合功能實例詳解

以上是細說VueJS生命週期與鉤子函數應用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！