vue組件的生命週期是什麼

在vue元件中，生命週期指的是從元件建立開始，到元件銷毀，所經歷的整個過程；在這個過程中的一些不同的階段，vue會呼叫指定的一些元件方法。基本生命週期函數有以下幾個階段：建立階段、掛載階段、更新階段、卸載階段、其它。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

1、元件生命週期

元件生命週期指的是元件從建立到銷毀的過程，在這個過程中的一些不同的階段，vue 會呼叫指定的一些元件方法。

基本生命週期函數有以下幾個階段：

• #建立階段
• #掛載階段

卸載階段

其它

每一個階段都對應著

之前

和之後 兩個函數。

2、建立階段#2-1、beforeCreate()

在實例初始化之後，資料觀測(data observer) 和event/watcher 事件配置之前被呼叫。初始化階段，應用不多。 2-2、created()在實例建立完成後立即被呼叫。在這一步，實例已完成以下的配置：資料觀測 (data observer)，property 和方法的運算，watch/event 事件回呼。然而，掛載階段還沒開始，

$el

property 目前尚不可用。

3、掛載階段

#3-1、beforeMount()

在掛載開始之前被呼叫：相關的

render

函數首次被呼叫。 3-2、mounted()

該階段執行完了模板解析，以及掛載。同時元件根元件元素被賦給了 $el 屬性，可以透過

DOM

運算來處理元件內部元素處理了。

4、更新階段

4-1、beforeUpdate()資料更新時調用，但是還沒有對視圖進行重新渲染，這個時候，可以取得視圖更新之前的狀態。

4-2、updated()

由於資料的變更導致的視圖重新渲染，可以透過DOM 操作來取得視圖的最新狀態。

5、卸載階段#5-1、beforeDestroy()

實例銷毀前調用，移除一些不必要的冗餘數據，例如計時器。

5-2、destroyed()

Vue 實例銷毀後呼叫。

6、其它

#6-1、.$nextTick()

將回調延遲到下次DOM 更新循環之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。它跟全域方法

Vue.nextTick

一樣，不同的是回呼的

this

自動綁定到呼叫它的實例上。 與

updated### 有些類似，###this.$nextTick()### 可以用作局部的資料更新後DOM更新結束後的操作，全域的可以用## #updated### 生命週期函數。 #########6-2、errorCaptured()#########當捕獲一個來自子孫組件的錯誤時被調用，此鉤子會收到三個參數：錯誤物件、發生錯誤的組件實例以及一個包含錯誤來源資訊的字串。此鉤子可以傳回 ###false### 以阻止該錯誤繼續向上傳播。 ############7、生命週期的一些使用場景#############**created：**進行ajax請求非同步資料的取得、初始化資料## ####**mounted：**掛載元素dom節點的取得######**$nextTick：**針對單一事件更新資料後立即操作dom######**updated：* *任何資料的更新######【相關推薦：《###vue.js教學###》】###

以上是vue組件的生命週期是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！