Vue提供的可以注冊(cè)的鉤子都在上圖片的紅色框標(biāo)注恢共。他們是：
·beforeCreate
在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer)和event/watcher事件配置之前被調(diào)用璧亚。
·created
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用讨韭。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)癣蟋，屬性和方法的運(yùn)算透硝，watch/event事件回調(diào)。然而疯搅，掛載階段還沒開始濒生，$el屬性目前不可見。
·beforeMount
在掛載開始之前被調(diào)用：相關(guān)的render函數(shù)首次被調(diào)用幔欧。
·mounted
el被新創(chuàng)建的vm.$el替換罪治，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素礁蔗，當(dāng)mounted被調(diào)用時(shí)vm.$el也在文檔內(nèi)觉义。
·beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前浴井。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)谁撼，這不會(huì)觸發(fā)附加的重渲染過程。
·updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁滋饲，在這之后會(huì)調(diào)用該鉤子厉碟。
當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件DOM已經(jīng)更新屠缭，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作箍鼓。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)呵曹，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)款咖。
該鉤子在服務(wù)器端渲染期間不被調(diào)用何暮。
·beforeDestroy
實(shí)例銷毀之前調(diào)用。在這一步铐殃，實(shí)例仍然完全可用海洼。
·destroyed
Vue實(shí)例銷毀后調(diào)用。調(diào)用后富腊，Vue實(shí)例指示的所有東西都會(huì)解綁定坏逢，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀赘被。 該鉤子在服務(wù)器端渲染期間不被調(diào)用是整。
接下來我們做一個(gè)例子，看一下Vue中所有的生命周期怎么用的民假。
Vue入門之生命周期
{{ number }}
var app = new Vue({
el: '#app',
data: {
number: 1
},
beforeCreate: function () {
console.log('beforeCreate鉤子執(zhí)行...');
console.log(this.number)
},
cteated: function () {
console.log('cteated鉤子執(zhí)行...');
console.log(this.number)
},
beforeMount: function () {
console.log('beforeMount鉤子執(zhí)行...');
console.log(this.number)
},
mounted: function () {
console.log('mounted鉤子執(zhí)行...');
console.log(this.number)
},
beforeUpdate: function () {
console.log('beforeUpdate鉤子執(zhí)行...');
console.log(this.number)
},
updated: function () {
console.log('updated鉤子執(zhí)行...');
console.log(this.number)
},
beforeDestroy: function () {
console.log('beforeDestroy鉤子執(zhí)行...');
console.log(this.number)
},
destroyed: function () {
console.log('destroyed鉤子執(zhí)行...');
console.log(this.number)
},
});
