開發(fā)人員提供了一個(gè)Web開發(fā)人員可以在Vue.js應(yīng)用程序的整個(gè)生命周期中使用的各種方法的討論。
生命周期鉤子是在Vue對象生命周期的某個(gè)階段執(zhí)行的已定義方法。從初始化開始到它被破壞時(shí)，對象都會(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（新對象誕生）
Vue對象用新方法實(shí)例化。它創(chuàng)建一個(gè)Vue類的對象來處理DOM元素。對象的這個(gè)生命階段可以通過beforeCreated 掛鉤來訪問 。我們可以在這個(gè)鉤子中插入我們的代碼，在對象初始化之前執(zhí)行。
創(chuàng)建（具有默認(rèn)特性的對象）
在這個(gè)生命階段，對象及其事件完全初始化。 created 是訪問這個(gè)階段并編寫代碼的鉤子。
beforeMounted（對象在DOM中適合形狀）
這個(gè)鉤子被調(diào)用 beforeMounted。在這個(gè)階段，它檢查是否有任何模板可用于要在DOM中呈現(xiàn)的對象。如果沒有找到模板，那么它將所定義元素的外部HTML視為模板。
已安裝（DOM已準(zhǔn)備就緒并放置在頁面內(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對象并觸發(fā)updated，屏幕上的變化得到呈現(xiàn) 。
beforeDestroy（對象準(zhǔn)備死掉）
就在Vue對象被破壞并從內(nèi)存中釋放之前， deforeDestroy 鉤子被觸發(fā)，并允許我們在其中處理我們的自定義代碼。
為了激發(fā)這個(gè)鉤子，我添加了下面的代碼來銷毀Vue對象。
//這可以被調(diào)用來銷毀該對象，這將觸發(fā)銷毀鉤v1.$ destroy（）;
銷毀（對象停止并從內(nèi)存中刪除）
該 destroyed 鉤子被成功運(yùn)行銷毀對象上調(diào)用。
概要
我們可以使用生命周期鉤子在Vue對象生命周期的不同階段添加我們的自定義代碼。它將幫助我們控制在DOM中創(chuàng)建對象時(shí)創(chuàng)建的流程，以及更新和刪除對象。
