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

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

鉤子函數

vue的完整生命周期可分為三個階段：初始化階段、運行階段和銷毀階段。共存在很多鉤子函數，他們在vue生命周期不同的階段進行操作,列舉如下：

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

鉤子函數說明

• beforeCreate

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

• created

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

• beforeMount

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

• mounted

在這個函數調用時，組件已經出現在頁面中，數據、真實dom都已經處理好了，事件都已經掛載好了，可以在這里操作真實dom等事情。

• beforeUpdate

當組件或實例的數據更改之后，會立即執(zhí)行beforeUpdate，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染。

• updated

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

• beforeDestroy

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

• destroyed

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

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

鉤子函數：就是不同的生命周期 vue給我們暴露出來的 回調函數

示例：

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

希望本文所述對大家vue.js程序設計有所幫助。

最新評論