開發(fā)人員提供了一個(gè)Web開發(fā)人員可以在Vue.js應(yīng)用程序的整個(gè)生命周期中使用的各種方法的討論臭墨。
生命周期鉤子是在Vue對(duì)象生命周期的某個(gè)階段執(zhí)行的已定義方法盗尸。從初始化開始到它被破壞時(shí)，對(duì)象都會(huì)遵循不同的生命階段用含。這是一個(gè)著名的圖表离咐，表示掛鉤順序谱俭。
讓我們將代碼添加到鉤子并查看它們?nèi)绾伪唤夤偷碾A段。
<!DOCTYPE html >
<html>
<head>
<div id='div1' v-bind:title="div_title">{{hello_message}}</div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
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 updatev1.$data.hello_message = "New message";// This can be invoked to destroy the object, which will fire the destroy hook//v1.$destroy();
</script>
</body>
</html>
beforeCreate（新對(duì)象誕生）
Vue對(duì)象用新方法實(shí)例化宵蛀。它創(chuàng)建一個(gè)Vue類的對(duì)象來處理DOM元素昆著。對(duì)象的這個(gè)生命階段可以通過beforeCreated 掛鉤來訪問 。我們可以在這個(gè)鉤子中插入我們的代碼术陶，在對(duì)象初始化之前執(zhí)行宣吱。
創(chuàng)建（具有默認(rèn)特性的對(duì)象）
在這個(gè)生命階段，對(duì)象及其事件完全初始化瞳别。 created 是訪問這個(gè)階段并編寫代碼的鉤子征候。
beforeMounted（對(duì)象在DOM中適合形狀）
這個(gè)鉤子被調(diào)用 beforeMounted。在這個(gè)階段祟敛，它檢查是否有任何模板可用于要在DOM中呈現(xiàn)的對(duì)象疤坝。如果沒有找到模板，那么它將所定義元素的外部HTML視為模板馆铁。
已安裝（DOM已準(zhǔn)備就緒并放置在頁(yè)面內(nèi)）
一旦模板準(zhǔn)備就緒跑揉。它將數(shù)據(jù)放入模板并創(chuàng)建可呈現(xiàn)元素。用這個(gè)新的數(shù)據(jù)填充元素替換DOM元素埠巨。這一切都發(fā)生在mounted鉤子上历谍。
beforeUpdate（更改已完成，但尚未準(zhǔn)備好更新DOM）
在外部事件/用戶輸入beforeUpdate發(fā)生更改時(shí)辣垒，此鉤子即 在反映原始DOM元素的更改之前被觸發(fā)望侈。
為了解決這個(gè)問題 beforeUpdated，我添加了下面的代碼勋桶。它通過更新DOM來更改運(yùn)行時(shí)中的hello_message脱衙。
// To fire updatev1.$data.hello_message="New message";
更新（在DOM中呈現(xiàn)的更改）
然后，通過實(shí)際更新DOM對(duì)象并觸發(fā)updated例驹，屏幕上的變化得到呈現(xiàn) 捐韩。
beforeDestroy（對(duì)象準(zhǔn)備死掉）
就在Vue對(duì)象被破壞并從內(nèi)存中釋放之前， deforeDestroy 鉤子被觸發(fā)鹃锈，并允許我們?cè)谄渲刑幚砦覀兊淖远x代碼荤胁。
為了激發(fā)這個(gè)鉤子，我添加了下面的代碼來銷毀Vue對(duì)象屎债。
//這可以被調(diào)用來銷毀該對(duì)象仅政，這將觸發(fā)銷毀鉤v1.$ destroy（）;
銷毀（對(duì)象停止并從內(nèi)存中刪除）
該 destroyed 鉤子被成功運(yùn)行銷毀對(duì)象上調(diào)用垢油。
概要
我們可以使用生命周期鉤子在Vue對(duì)象生命周期的不同階段添加我們的自定義代碼。它將幫助我們控制在DOM中創(chuàng)建對(duì)象時(shí)創(chuàng)建的流程已旧，以及更新和刪除對(duì)象。
