每個vue實例在被創(chuàng)建之前都要經過初始化。例如觀測數據，初始化事件，掛載Dom，同時data變化時，更新Dom，在這一系列過程中有著一些鉤子，在完成某些特定的條件時，便會觸發(fā)，我們稱它為鉤子函數。一個實例從創(chuàng)建到銷毀的過程則稱之為實例的生命周期。
來看一張vue生命周期的圖解
生命周期圖解
下面介紹一下vue的鉤子函數：
- beforeCreate
beforeCreate發(fā)生在new Vue()之后，但在還沒有觀測數據之前調用 - created
在觀測數據以及vue內部初始化事件后調用created鉤子 - beforeMount
開始掛載鉤子，但是還沒有生成HTML到頁面上，此時標簽內任然是Mustach - mounted
掛載完成，html渲染到頁面上，此時可以用axios發(fā)送一些ajax請求 - beforeUpdate
在數據更新之前調用的鉤子 - updated
數據更新之后調用,之后多次更新數據任然會調用此鉤子 - beforeDestroy
vue實例銷毀前執(zhí)行 - destroyed
vue實例銷毀后執(zhí)行，此后vue的watcher，組件，以及時間都被卸載，不能使用，但是data任然存在
最后理一遍思路，先new Vue()創(chuàng)建一個實例，調用beforeCreate鉤子，觀測數據，初始化事件，調用created鉤子，判斷el是否存在，若不存在則等到vm.mount(el)被調用才繼續(xù)往下執(zhí)行，若存在，則繼續(xù)判斷template是否存在，若template存在，則把data和template結合，但是不放到頁面上，若不存在則使用el的outerHTML作為html，接著調用beforeMount鉤子，此時，頁面上任然是大胡子語法的標簽，把結合的html放到頁面上，調用mounted鉤子。當數據發(fā)生變化時，先調用beforeUpdate鉤子，虛擬Dom渲染數據，然后調用updated鉤子。最后當destroy()被調用時，先執(zhí)行beforedestroy鉤子，然后卸載組件，事件，watcher，再調用destroyed鉤子，至此就是一個完整的vue生命周期。
下面是一個vue生命周期的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: "monkeyWang is boy"
},
beforeCreate: function() {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message)
},
created: function() {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('beforeMount 掛載前狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
console.group('mounted 掛載結束狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function() {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function() {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function() {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
}
})
</script>
</body>
</html>
