vue組件生命周期指的是什么

這篇文章將為大家詳細講解有關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組件生命周期指的是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。