本文實(shí)例分析了vue生命周期。分享給大家供大家參考，具體如下：

每個(gè)Vue實(shí)例都存在完整的生命周期，經(jīng)歷從創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程。如下圖所示

鉤子函數(shù)

vue的完整生命周期可分為三個(gè)階段：初始化階段、運(yùn)行階段和銷毀階段。共存在很多鉤子函數(shù)，他們?cè)趘ue生命周期不同的階段進(jìn)行操作,列舉如下：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

鉤子函數(shù)說明

• beforeCreate

通過new Vue() 創(chuàng)建vue實(shí)例，vue的生命周期便拉開了序幕，首先會(huì)執(zhí)行beforeCreate鉤子函數(shù)。此時(shí)的vue實(shí)例只是一個(gè)空殼，還未掛載DOM元素，無法訪問到數(shù)據(jù)和真實(shí)的dom，一般不做操作。

• created

這個(gè)時(shí)候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù)，在這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù)和不會(huì)觸發(fā)其他鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取。

• beforeMount

在這個(gè)函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成（馬上就要渲染），這里也可以更改數(shù)據(jù)，不會(huì)觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會(huì)，不會(huì)觸發(fā)其他的鉤子函數(shù)。

• mounted

在這個(gè)函數(shù)調(diào)用時(shí)，組件已經(jīng)出現(xiàn)在頁面中，數(shù)據(jù)、真實(shí)dom都已經(jīng)處理好了，事件都已經(jīng)掛載好了，可以在這里操作真實(shí)dom等事情。

• beforeUpdate

當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后，會(huì)立即執(zhí)行beforeUpdate，然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進(jìn)行對(duì)比之后重新渲染。

• updated

當(dāng)更新完成后，執(zhí)行updated，數(shù)據(jù)已經(jīng)更改完成，dom也重新render完成，可以操作更新后的虛擬dom。

• beforeDestroy

當(dāng)通過某種方式調(diào)用$destroy方法后，立即執(zhí)行beforeDestroy函數(shù)做一些善后工作，如清除計(jì)時(shí)器、清除非指令綁定的事件等。

• destroyed

組件的數(shù)據(jù)綁定、監(jiān)聽等去掉后只剩下dom空殼，此時(shí)執(zhí)行destroyed。當(dāng)然，也可以在這里完成上述操作。

vue的生命周期：從出生到加載 到 銷毀 有一套完整的生命周期過程
能夠讓我們進(jìn)行在不同時(shí)期去寫不同的代碼 去做不同的事情

鉤子函數(shù)：就是不同的生命周期 vue給我們暴露出來的 回調(diào)函數(shù)

示例：

var vn = new Vue({
el:'.box',
data:{
msg:'<h1>呵呵</h1>'
},
beforeCreate:function() {
alert("實(shí)例要?jiǎng)?chuàng)建了,要開始表演了");
},
created:function() {
alert('vue實(shí)例已經(jīng)new出來了,方法和屬性還沒有編譯');
},
beforeMount:function() {
alert('vue實(shí)例已經(jīng)創(chuàng)建完成,馬上要執(zhí)行內(nèi)部屬性和方法的編譯');
},
mounted:function() {
alert('對(duì)象和屬性已經(jīng)編譯完成');
},
beforeUpdate:function() {
alert('數(shù)據(jù)馬上更新,沒保存趕緊保存');
},
updated:function() {
alert('數(shù)據(jù)已經(jīng)更新');
},
beforeDestroy:function() {
alert('vue實(shí)例已經(jīng)走到盡頭了');
},
destroyed:function() {
alert("vue實(shí)例永遠(yuǎn)活在我們心中!!!");
}
})

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

最新評(píng)論