在使用vue一個(gè)多禮拜后振乏，感覺現(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ù)里做产禾，我們不清楚。
于是我開始先去搜索牵啦，發(fā)現(xiàn)vue2.0的生命周期沒啥文章亚情。大多是1.0的版本介紹。最后還是找到一篇不錯(cuò)的（會(huì)放在最后）
vue生命周期簡(jiǎn)介
咱們從上圖可以很明顯的看出現(xiàn)在vue2.0都包括了哪些生命周期的函數(shù)了哈雏。
生命周期探究
對(duì)于執(zhí)行順序和什么時(shí)候執(zhí)行势似，看上面兩個(gè)圖基本有個(gè)了解了拌夏。下面我們將結(jié)合代碼去看看鉤子函數(shù)的執(zhí)行僧著。
ps:下面代碼可以直接復(fù)制出去執(zhí)行
{{ message }}
varapp =newVue({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);//undefinedconsole.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);//undefinedconsole.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)? ? ? ? }? ? })
create 和 mounted 相關(guān)
咱們?cè)赾hrome瀏覽器里打開履因，F(xiàn)12看console就能發(fā)現(xiàn)
beforecreated：el 和 data 并未初始化?
created:完成了 data 數(shù)據(jù)的初始化，el沒有
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è)趺从媚匚Ｈ遥蚁氪蠹铱赡苡羞@樣的疑問吧宗挥，我也有，哈哈哈种蝶。
beforecreate?: 舉個(gè)栗子：可以在這加個(gè)loading事件?
created?：在這結(jié)束loading契耿，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行?
mounted?： 在這發(fā)起后端請(qǐng)求蛤吓，拿回?cái)?shù)據(jù)宵喂，配合路由鉤子做一些事情
beforeDestroy： 你確認(rèn)刪除XX嗎？ destroyed ：當(dāng)前組件已被刪除会傲，清空相關(guān)內(nèi)容
