每個(gè)vue實(shí)例在被創(chuàng)建之前都要經(jīng)過初始化。例如觀測(cè)數(shù)據(jù)峦失，初始化事件扇丛，掛載Dom，同時(shí)data變化時(shí)尉辑，更新Dom帆精，在這一系列過程中有著一些鉤子，在完成某些特定的條件時(shí)隧魄，便會(huì)觸發(fā)卓练，我們稱它為鉤子函數(shù)。一個(gè)實(shí)例從創(chuàng)建到銷毀的過程則稱之為實(shí)例的生命周期购啄。
來看一張vue生命周期的圖解
下面介紹一下vue的鉤子函數(shù)：
- beforeCreate
beforeCreate發(fā)生在new Vue()之后襟企，但在還沒有觀測(cè)數(shù)據(jù)之前調(diào)用 - created
在觀測(cè)數(shù)據(jù)以及vue內(nèi)部初始化事件后調(diào)用created鉤子 - beforeMount
開始掛載鉤子，但是還沒有生成HTML到頁面上狮含，此時(shí)標(biāo)簽內(nèi)任然是Mustach - mounted
掛載完成顽悼，html渲染到頁面上，此時(shí)可以用axios發(fā)送一些ajax請(qǐng)求 - beforeUpdate
在數(shù)據(jù)更新之前調(diào)用的鉤子 - updated
數(shù)據(jù)更新之后調(diào)用,之后多次更新數(shù)據(jù)任然會(huì)調(diào)用此鉤子 - beforeDestroy
vue實(shí)例銷毀前執(zhí)行 - destroyed
vue實(shí)例銷毀后執(zhí)行几迄，此后vue的watcher蔚龙，組件，以及時(shí)間都被卸載乓旗，不能使用府蛇，但是data任然存在
最后理一遍思路，先new Vue()創(chuàng)建一個(gè)實(shí)例屿愚，調(diào)用beforeCreate鉤子，觀測(cè)數(shù)據(jù)务荆，初始化事件妆距，調(diào)用created鉤子，判斷el是否存在函匕，若不存在則等到vm.mount(el)被調(diào)用才繼續(xù)往下執(zhí)行娱据，若存在，則繼續(xù)判斷template是否存在盅惜，若template存在中剩，則把data和template結(jié)合，但是不放到頁面上抒寂，若不存在則使用el的outerHTML作為html结啼，接著調(diào)用beforeMount鉤子，此時(shí)屈芜，頁面上任然是大胡子語法的標(biāo)簽郊愧，把結(jié)合的html放到頁面上朴译，調(diào)用mounted鉤子。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)属铁，先調(diào)用beforeUpdate鉤子眠寿，虛擬Dom渲染數(shù)據(jù)，然后調(diào)用updated鉤子焦蘑。最后當(dāng)destroy()被調(diào)用時(shí)盯拱，先執(zhí)行beforedestroy鉤子，然后卸載組件例嘱，事件狡逢，watcher，再調(diào)用destroyed鉤子蝶防，至此就是一個(gè)完整的vue生命周期甚侣。
下面是一個(gè)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 掛載結(jié)束狀態(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>
