Vue生命周期，及父子組件生命周期順序

祭出官方圖：　

 

 

 Vue組件的生命周期主要為8個: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

其實官方圖已經講明白很多了。包括各個階段之間做了些什么事情，但在掌握上終歸還是有一些模糊的地方。

下面做了一些梳理。

個人理解是主要分為三個階段：

• 創建階段（注冊實例與掛載）： beforeCreate、created、beforeMount、mounted
• 運行階段：beforeUpdate、updated
• 注銷階段：beforeDestroy、destroyed

以下代碼vue分別注冊了father和child組件，並在father中調用了child子組件來觀察他們的生命周期已經先后關系：

<!-- HTML部分 --> <!-- 父組件掛載 --> <div id="app"></div> <!-- child模板 --> <div class="child" @click="updateTest()"> i'm child <br /> data: {{data}} </div> <!-- father模板 --> <div class="father"> <button @click="changeDate()">{{tData}}</button> <button @click="destroyEl()">destroy</button> <child v-if="showChild"></child> I'm father </div>

 

 

/*JavaScript部分*/ /*child*/ var child = Vue.extend({ template: '#child', data(){ 　　return { 　　　　data: 0 　　} }, methods:{ consoleinfo(){　　　　console.log(this.data)}, updateTest(){　　　　　this.data += 1} }, beforeCreate(){ console.log('child-beforeCreate')}, created(){ console.log('child-created')}, beforeMount(){ console.log('child-beforeMount')}, mounted(){ console.log('child-mounted')}, beforeUpdate(){ console.log('child-beforeUpdate')}, updated(){ console.log('child-updated')}, beforeDestroy(){ console.log('child-beforeDestroy:') this.consoleinfo() }, destroyed(){ console.log('child-destroyed:') this.consoleinfo() } }) 

 

/*father*/ new Vue({ el: '#app', template:'#father', components:{child}, data(){ return { tData: 0, tCom: 'computed', showChild: true } }, computed:{ tComputed(){ return this.tCom} }, methods:{ consoleinfo(){ console.log('data: ' + this.tData) console.log('computed: ' + this.tComputed) console.log('el: ' + this.$el.outerHTML) }, changeDate(){ this.tData += 1 this.tCom = 'changeComputed' }, destroyEl(){ 　　　　　　　　//this.showChild = false this.$destroy() } }, /** 創建階段 */ beforeCreate(){ console.log('beforeCreate:') this.consoleinfo() }, created(){ console.log('created:') this.consoleinfo() }, beforeMount(){ console.log('beforeMount:') this.consoleinfo() }, mounted(){ console.log('mounted:') this.consoleinfo() }, /** 運行階段 */ beforeUpdate(){ console.log('beforeUpdate:') this.consoleinfo() }, updated(){ console.log('updated:') this.consoleinfo() }, /** 注銷階段 */ beforeDestroy(){ console.log('beforeDestroy:') this.consoleinfo() }, destroyed(){ console.log('destroyed:') this.consoleinfo() } }) 

 

 

接下來看下各個生命周期控制台的輸出：

創建階段

beforeCreate：

在beforeCreate階段之前，vue做了init初始化的操作。操作包括：

——　注冊一些vue默認的屬性方法事件（例如初始化vue的生命周期 —— 鈎子beforeCreate（）等）

因此，在beforeCreate鈎子調用時，這些默認屬性方法事件已經注冊完成，但是vue實例中的data、computed、methods等都未定義：

——　圖中函數consoleinfo（），報錯“not a function”’

Created：

beforeCreate與Created之間，實例將定義的data、methods等初始化並進行注入。

因此在Created階段，控制台已經能夠輸出data、computed值，包括控制台輸出的方法methods，這些值都已在當前father組件實例中定義生成了。

—— 此時只是在js操作了vue實例，dom中的元素還並未掛載，因此實例的$el並不能夠調用outerHTML，因此報錯。

——（雖然father組件調用了child組件，但是此時子組件child生命周期還未開始！這里要注意，只是father組件做初始化。子組件實例的生命周期什么時候開始，接下來的father生命周期里會涉及）

——　由於data數據、methods方法等在created中已被定義，此時已經可以去做一些ajax請求后台數據。

beforeMount

created與beforeMount之間，主要做了兩步工作：

1、判斷實例在dom中有沒有掛載的元素（el:‘#app’），只有掛載了才能夠繼續。掛載好后，實例即與掛載dom元素進行了綁定（占坑），實例中也可以進行引用；

2、渲染dom模板。渲染dom模板只是在內存中，並非是在HTML中的DOM結構中渲染，所以前台在這個階段時，組件對應的元素是沒有顯示的。（在調用 this.$el.outerHTML 后，控制台輸出 <div id="app"></div>）

—— 可以看到fathe組件的beforeMount時，child子組件的vue創建生命周期已經完成到mounted階段。說明father在執行dom模板渲染的時候，會監測模板中是否有自定義的vue子組件。如果有，就進入子組件的生命周期的創建階段，等到所有子組件的完成創建並掛載（mounted）到父組件的模板當中后。才能表明父組件在內存中的模板渲染完成。

—— 子組件的mounted階段雖然完成，但父組件仍在beforeMounte階段時。前台也看不見子組件渲染的效果，子組件只是完成了掛載到父組件的模板中了（控制台可以看到dom樹中的元素並未變化）。因此此刻在子組件的mounted階段直接調用一些方法（dom操作方法）可能會造成異常錯誤。為保險起見可在子組件中通過 $nextTick() 回調，等下一次DOM更新后再進行dom的操作。

—— 以上內存中渲染DOM可以了解一下Virtual DOM技術。

mounted

mounted階段表示，當前實例在內存中渲染的組件模板，已成功掛在到父組件orDOM樹中。

控制台可以看出DOM樹中元素已經發生變化。

—— 這個階段可以引用到元素，上面子組件提到過，一些情況下可以通過 $nextTick（） 回調，避免一些意外錯誤。

運行階段

beforeUpdate

通過點擊左上角的button來改變father實例中的值

控制台

首先：只有實例中定義的變量綁定在了dom樹中，例如　<div>{{data}}<div>，當data發生改變，才會進入beforeUpdate階段。若dom樹中未綁定某變量，該變量只在實例中發生變化，那么就不會進入beforeUpdate階段！

我在代碼中綁定了tData變量，從beforeUpdate階段中可以看到，內部變量tData已經變化。頁面中DOM的 tData綁定值還未變化。

子組件的數據更新，不會引起父組件的beforeUpdate和updated生命周期鈎子。

update

 

beforeUpdate和updated階段直接，vue根據變量更新后的數據在虛擬DOM中進行渲染（圖中re-render）。

而后進行頁面相應組件的更新。

控制台組件中值為1

注銷階段

若一個組件被判斷為銷毀，則進入相應的銷毀階段。一般情況下銷毀階段的調用有：

• v-if = ‘false’ 
• v-for 列表發生了變化（列表中部分item不再使用）
• 實例調用 $destroy() 方法

beforeDestroy

進入該階段，表明實例已經接收到了被銷毀的指令。

在該階段，實例的屬性、方法、事件等仍然可以調用。

destroyed

在beforeDestroy與destroyed之間，組件開始注銷自己的屬性、方法、事件以及自己的子組件。只有等到所有都已注銷完成（子組件達到destroyed階段），父組件才能夠進入destroyed階段。看控制台。

以上注銷方法，是通過 $destroy() 來進行的，可以看到調用該方法后，頁面上的元素並未隨vue實例注銷。但是通過點擊button已經無法改變其button數組，說明實例已經不存在。

—— $destroy只是完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器。

—— 官方建議，$destroy 在多數情況下，還是用 v-if 和 v-for 來替代