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

于田網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

1、組件生命周期

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

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

創(chuàng)建階段掛載階段更新階段卸載階段其它

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

2、創(chuàng)建階段

2-1、beforeCreate()

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

2-2、created()

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

3、掛載階段

3-1、beforeMount()

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

3-2、mounted()

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

4、更新階段

4-1、beforeUpdate()

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

4-2、updated()

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

5、卸載階段

5-1、beforeDestroy()

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

5-2、destroyed()

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

6、其它

6-1、.$nextTick()

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

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

6-2、errorCaptured()

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

7、生命周期的一些使用場(chǎng)景

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

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

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

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

【相關(guān)推薦：《vue.js教程》】

本文名稱：vue組件的生命周期是什么
URL地址：http://jinyejixie.com/article48/choehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、軟件開發(fā)、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)