前端路上，一切困難都是紙老虎暇藏！
本文旨在幫助自己掌握vue的知識(shí)點(diǎn)目代，如有侵權(quán)，聯(lián)系更改~
最近用vue2.0進(jìn)行項(xiàng)目實(shí)戰(zhàn)時(shí)点弯，經(jīng)常遇到需要在生命周期鉤子函數(shù)里面執(zhí)行一些自己的代碼扇调，舉個(gè)栗子：
但是，有時(shí)候分不清楚應(yīng)該將代碼放在哪個(gè)生命周期中執(zhí)行：
官網(wǎng)生命周期示意圖
結(jié)合示意圖抢肛，并在控制臺(tái)中對(duì)每個(gè)函數(shù)console一個(gè)值出來(lái)狼钮，進(jìn)一步理解vue的生命周期。
Lifecycle hooks
| 鉤子 | 介紹 |
|---|---|
| beforeCreate | 組件實(shí)例剛剛被創(chuàng)建捡絮，組件屬性計(jì)算之前熬芜，如data屬性等 |
| created | 組件實(shí)例創(chuàng)建完成，屬性已綁定福稳，但DOM還未生成涎拉，$el屬性還不存在 |
| beforeMount | 模板編譯/掛載之前 |
| mounted | 模板編譯/掛載之后（不保證組件已在document中） |
| beforeUpdate | 組件更新之前 |
| updated | 組件更新之后 |
| activeted | for keep-alive,組件被激活時(shí)用 |
| deactived | for keep-alive,組件被移除時(shí)調(diào)用 |
| beforeDestory | 組件銷毀前調(diào)用 |
| destoryed | 組件銷毀后調(diào)用 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "A test for us better to understand lifecycle hooks."
},
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)//undefined
},
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>
控制臺(tái)輸出結(jié)果：
到這里，update相關(guān)鉤子并未執(zhí)行；根據(jù)vue官方示意圖說(shuō)明：when data changes,觸發(fā)beforeUpdate鉤子函數(shù)鼓拧，然后Virtual DOM re-render and patch,觸發(fā)updated鉤子函數(shù)半火；
在chrome console里更改message的值：
app.message="modify the value";
接下來(lái)執(zhí)行app.$destroy();
銷毀完成后，再對(duì)值進(jìn)行更改季俩，vue不再響應(yīng)慈缔，但是原來(lái)的dom結(jié)構(gòu)仍然存在。
總結(jié)
關(guān)于鉤子函數(shù)中執(zhí)行的一些操作總結(jié)：
created:里面放請(qǐng)求比較好种玛，這時(shí)候DOM還沒(méi)開(kāi)始渲染藐鹤，數(shù)據(jù)請(qǐng)求回來(lái)一起渲染；
mounted:執(zhí)行依賴DOM的一些操作,并配合vm.$nextTick使用赂韵；
參考文獻(xiàn)：https://segmentfault.com/a/1190000008010666
