var v1 = new Vue({
el: "#div1",
data: {
hello_message: "Hello, there welcome to VueJS world",
div_title: "This is my intro div",
},
beforeCreate: function(){
alert('Before Create');
},
created: function(){
alert('Created');
},
beforeMount: function(){
alert('Before Mount');
},
mounted: function(){
alert('Mounted');
},
beforeUpdate: function(){
alert('Before Update');
},
updated: function(){
alert('Updated');
},
beforeDestroy: function(){
alert('Before Destroy');
},
destroyed: function(){
alert('Destroyed');
}
});
// To fire update
v1.$data.hello_message = "New message";
// This can be invoked to destroy the object, which will fire the destroy hook
//v1.$destroy();
beforeCreate（新對象誕生）
Vue對象用新方法實例化。它創建一個Vue類的對象來處理DOM元素。對象的這個生命階段可以通過beforeCreated 掛鉤來訪問 。我們可以在這個鉤子中插入我們的代碼，在對象初始化之前執行。
創建（具有默認特性的對象）
在這個生命階段，對象及其事件完全初始化。 created 是訪問這個階段並編寫代碼的鉤子。
beforeMounted（對象在DOM中適合形狀）
這個鉤子被調用 beforeMounted。在這個階段，它檢查是否有任何模板可用於要在DOM中呈現的對象。如果沒有找到模板，那麼它將所定義元素的外部HTML視為模板。
已安裝（DOM已準備就緒並放置在頁面內）
一旦模板準備就緒。它將數據放入模板並創建可呈現元素。用這個新的數據填充元素替換DOM元素。這一切都發生在mounted鉤子上。
beforeUpdate（更改已完成，但尚未準備好更新DOM）
在外部事件/用戶輸入beforeUpdate發生更改時，此鉤子即 在反映原始DOM元素的更改之前被觸發。
為了解決這個問題 beforeUpdated，我添加了下面的代碼。它通過更新DOM來更改運行時中的hello_message。
// To fire update
v1.$data.hello_message = "New message";
更新（在DOM中呈現的更改）
然後，通過實際更新DOM對象並觸發updated，屏幕上的變化得到呈現 。
beforeDestroy（對象準備死掉）
就在Vue對象被破壞並從內存中釋放之前， deforeDestroy 鉤子被觸發，並允許我們在其中處理我們的自定義代碼。
為了激發這個鉤子，我添加了下面的代碼來銷燬Vue對象。
//這可以被調用來銷燬該對象，這將觸發銷燬鉤
v1.$ destroy（）;
銷燬（對象停止並從內存中刪除）
該 destroyed 鉤子被成功運行銷燬對象上調用。
概要
我們可以使用生命週期鉤子在Vue對象生命週期的不同階段添加我們的自定義代碼。它將幫助我們控制在DOM中創建對象時創建的流程，以及更新和刪除對象。
閱讀更多 愛碼農 的文章
