Vue的生命周期

Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。

Vue的生命周期包括：開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過(guò)程。

在Vue的整個(gè)生命周期中，提供了一系列的事件，可以注冊(cè)JavaScript方法，達(dá)到控制整個(gè)過(guò)程的目的，在這些JavaScript方法中的this直接指向的是vue的實(shí)例。

在Vue的整個(gè)生命周期中，實(shí)例可以調(diào)用一些生命周期鉤子，這提供了執(zhí)行自定義邏輯的機(jī)會(huì)。

Vue提供的生命周期鉤子如下：

①　beforeCreate

在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer，開始監(jiān)控Data對(duì)象數(shù)據(jù)變化)和初始化事件(init event，Vue內(nèi)部初始化事件)之前被調(diào)用。

②　created

在實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算，event事件回調(diào)。掛載階段尚未開始，$el 屬性不可見。

③　beforeMount

在掛載開始之前被調(diào)用。相關(guān)的render函數(shù)首次被調(diào)用。實(shí)例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。注意此時(shí)還沒有掛載html到頁(yè)面上。

④　mounted

在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對(duì)象。此時(shí)模板中的html渲染到了html頁(yè)面中，此時(shí)一般可以做一些Ajax操作。注意mounted只會(huì)執(zhí)行一次。

⑤　beforeUpdate

在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。

⑥　updated

在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時(shí)，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

⑦　beforeDestroy

在實(shí)例銷毀之前調(diào)用。實(shí)例仍然完全可用。

⑧　destroyed

在實(shí)例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

Vue官網(wǎng)的生命周期圖示：