在使用vue一個(gè)多禮拜后哥攘，感覺(jué)現(xiàn)在還停留在初級(jí)階段，雖然知道怎么和后端做數(shù)據(jù)交互材鹦，但是對(duì)于mounted這個(gè)掛載還不是很清楚的逝淹。放大之，對(duì)vue的生命周期不甚了解桶唐。只知道簡(jiǎn)單的使用栅葡，而不知道為什么，這對(duì)后面的踩坑是相當(dāng)不利的尤泽。
因?yàn)槲覀冇袝r(shí)候會(huì)在幾個(gè)鉤子函數(shù)里做一些事情欣簇，什么時(shí)候做，在哪個(gè)函數(shù)里做安吁，我們不清楚醉蚁。
于是我開(kāi)始先去搜索，發(fā)現(xiàn)vue2.0的生命周期沒(méi)啥文章鬼店。大多是1.0的版本介紹网棍。最后還是找到一篇不錯(cuò)的（會(huì)放在最后）
vue生命周期簡(jiǎn)介
生命周期探究
對(duì)于執(zhí)行順序和什么時(shí)候執(zhí)行，看上面兩個(gè)圖基本有個(gè)了解了妇智。下面我們將結(jié)合代碼去看看鉤子函數(shù)的執(zhí)行滥玷。
ps:下面代碼可以直接復(fù)制出去執(zhí)行
<!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 : "xuxiao 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>
create 和 mounted 相關(guān)
咱們?cè)赾hrome瀏覽器里打開(kāi)，F(xiàn)12看console就能發(fā)現(xiàn)
beforecreated：el和data 并未初始化
created:完成了 data數(shù)據(jù)的初始化巍棱，el沒(méi)有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載
另外在標(biāo)紅處惑畴，我們能發(fā)現(xiàn)el還是{{message}}
，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)航徙，先把坑占住了如贷。到后面mounted
掛載的時(shí)候再把值渲染進(jìn)去。
update 相關(guān)
這里我們?cè)?chrome console里執(zhí)行以下命令
app.message= 'yes !! I do'
;
下面就能看到data里的值被修改后，將會(huì)觸發(fā)update的操作杠袱。
destroy 相關(guān)
有關(guān)于銷毀尚猿，暫時(shí)還不是很清楚。我們?cè)赾onsole里執(zhí)行下命令對(duì) vue實(shí)例進(jìn)行銷毀楣富。銷毀完成后凿掂，我們?cè)僦匦赂淖僲essage的值，vue不再對(duì)此動(dòng)作進(jìn)行響應(yīng)了纹蝴。但是原先生成的dom元素還存在庄萎，可以這么理解，執(zhí)行了destroy操作塘安，后續(xù)就不再受vue控制了糠涛。
app.$destroy();
生命周期總結(jié)
這么多鉤子函數(shù)，我們?cè)趺从媚匕业蚁氪蠹铱赡苡羞@樣的疑問(wèn)吧脱羡，我也有，哈哈哈免都。
beforecreate
: 舉個(gè)栗子：可以在這加個(gè)loading
事件created
：在這結(jié)束loading
锉罐，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行mounted
： 在這發(fā)起后端請(qǐng)求绕娘，拿回?cái)?shù)據(jù)脓规，配合路由鉤子做一些事情beforeDestory
： 你確認(rèn)刪除XX嗎？destoryed
：當(dāng)前組件已被刪除险领，清空相關(guān)內(nèi)容當(dāng)然侨舆，還有更多，繼續(xù)探索中……
