使用Vue有一段時間了套利，也經(jīng)歷了幾個項目的實戰(zhàn)推励，但發(fā)現(xiàn)自己對Vue的理解還是不夠深刻，很多時候偶然看到Vue文章才發(fā)現(xiàn)原來Vue還可以這么玩肉迫。所以決定重新觀看Vue的文檔深入理解验辞，并寫下一些筆記以供記憶。
個人覺得使用Vue之前昂拂，需要了解整個Vue的生命周期受神，清楚的認識到Vue在每個階段的鉤子函數(shù)，這樣才可以更好讓我們去使用Vue格侯。
綜述
每個 Vue 實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程鼻听。例如，實例需要配置數(shù)據(jù)觀測(data observer)联四、編譯模版撑碴、掛載實例到 DOM ，然后在數(shù)據(jù)變化時更新 DOM 朝墩。在這個過程中醉拓，實例也會調用一些生命周期鉤子 ，這就給我們提供了執(zhí)行自定義邏輯的機會。
淺顯的來說亿卤，生命周期的鉤子函數(shù)就是回調函數(shù)愤兵，在不同的階段有不同的回調函數(shù)供用戶處理自定義的事件。
生命周期圖例
從我的理解來說排吴，Vue的生命周期主要可以分為四大部分秆乳，實例化（created），掛載/渲染（mounted）钻哩，更新（updated）屹堰，銷毀（destroyed），這也是平時使用最多的鉤子函數(shù)街氢。
下面是完整的Vue生命周期圖例扯键。
實例化
beforeCreate
組件實例剛被創(chuàng)建，還沒有計算組件屬性珊肃，無法訪問data值荣刑；一般在此階段可以加載個一個loading事件。
此時訪問data和$el都是undefined
created
組件已經(jīng)綁定屬性近范，但仍未渲染模板嘶摊。就是說在created的鉤子函數(shù)中，你可以處理data的數(shù)據(jù)评矩，但是無法訪問$el叶堆，此時$el的值為“虛擬”的元素節(jié)點，也就是在此階段斥杜，你無法進行Dom的操作虱颗。如果你需要在created的時候進行Dom的處理，請務必在Vue.nextTick()函數(shù)中操作蔗喂。
在這個階段忘渔，一般做一些初始化操作，初始化一些自執(zhí)行函數(shù)缰儿。
掛載/渲染
beforeMount
組件模板掛載/渲染之前的鉤子函數(shù)畦粮，此階段已經(jīng)完成了$el和data初始化，但未掛載組件
mounted
在此階段乖阵，組件已經(jīng)編譯完成并進行渲染宣赔，可以訪問$el并進行Dom操作，但是需要注意一點的是瞪浸，這里并不能保證組件已經(jīng)存在document中儒将。此階段相當于在created中使用Vue.nextTick()。
此階段一般執(zhí)行數(shù)據(jù)請求对蒲，從后端獲取數(shù)據(jù)钩蚊。
更新
beforeUpdate
顧名思義贡翘，這個是在數(shù)據(jù)更新之前的鉤子函數(shù)，可以處理數(shù)據(jù)保存之類的事件砰逻。
updated
這是在數(shù)據(jù)更新后的鉤子函數(shù)鸣驱，在此階段，數(shù)據(jù)已完成更新,與數(shù)據(jù)綁定的Dom也已經(jīng)渲染完成蝠咆。
銷毀
beforeDestoroy
組件銷毀之前的鉤子函數(shù)丐巫，一般在此階段執(zhí)行數(shù)據(jù)銷毀的函數(shù)
destroyed
組件已經(jīng)銷毀，無法訪問組件的任何信息勺美。
栗子
var app = new Vue({
el: '#app',
data: {
},
beforeCreate(){
<!--無法訪問data屬性和$el-->
},
created(){
<!--已綁定data屬性，但無法訪問$el-->
},
beforeMount() {
<!--可以訪問$el,但組件未渲染-->
},
mounted() {
<!--已完成組件渲染碑韵，可正常操作-->
},
beforeUpdate() {
<!--數(shù)據(jù)更新前的鉤子函數(shù)-->
},
updated() {
<!--數(shù)據(jù)已更新赡茸，相關dom已重新渲染-->
},
beforeDestroy() {
<!--銷毀組件前的鉤子函數(shù)-->
},
destroyed() {
<!--組件已銷毀-->
}
})
