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

這篇文章將為大家詳細(xì)講解有關(guān)vue組件生命周期指的是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在vue組件中，生命周期指的是從組件創(chuàng)建開始，到組件銷毀，所經(jīng)歷的整個過程；在這個過程中的一些不同的階段，vue會調(diào)用指定的一些組件方法?；旧芷诤瘮?shù)有下面幾個階段：創(chuàng)建階段、掛載階段、更新階段、卸載階段、其它。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

1、組件生命周期

組件生命周期指的是組件從創(chuàng)建到銷毀的過程，在這個過程中的一些不同的階段，vue 會調(diào)用指定的一些組件方法。

基本生命周期函數(shù)有下面幾個階段：

• 創(chuàng)建階段

• 掛載階段

• 更新階段

• 卸載階段

• 其它

每一個階段都對應(yīng)著 之前 和 之后 兩個函數(shù)。

2、創(chuàng)建階段

2-1、beforeCreate()

在實例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。初始化階段，應(yīng)用不多。

2-2、created()

在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，property 和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el property 目前尚不可用。

3、掛載階段

3-1、beforeMount()

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

3-2、mounted()

該階段執(zhí)行完了模板解析，以及掛載。同時組件根組件元素被賦給了 $el 屬性，該階段可以通過 DOM 操作來對組件內(nèi)部元素進(jìn)行處理了。

4、更新階段

4-1、beforeUpdate()

數(shù)據(jù)更新時調(diào)用，但是還沒有對視圖進(jìn)行重新渲染，這個時候，可以獲取視圖更新之前的狀態(tài)。

4-2、updated()

由于數(shù)據(jù)的變更導(dǎo)致的視圖重新渲染，可以通過 DOM 操作來獲取視圖的最新狀態(tài)。

5、卸載階段

5-1、beforeDestroy()

實例銷毀之前調(diào)用，移除一些不必要的冗余數(shù)據(jù)，比如定時器。

5-2、destroyed()

Vue 實例銷毀后調(diào)用。

6、其它

6-1、.$nextTick()

將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上。

與 updated 有些類似，this.$nextTick() 可以用作局部的數(shù)據(jù)更新后DOM更新結(jié)束后的操作，全局的可以用 updated 生命周期函數(shù)。

6-2、errorCaptured()

當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用，此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。

7、生命周期的一些使用場景

**created：**進(jìn)行ajax請求異步數(shù)據(jù)的獲取、初始化數(shù)據(jù)

**mounted：**掛載元素dom節(jié)點的獲取

**$nextTick：**針對單一事件更新數(shù)據(jù)后立即操作dom

**updated：**任何數(shù)據(jù)的更新

關(guān)于“vue組件生命周期指的是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。