學了一陣子Vue,感覺初步瞭解了一些，但是還是比價少，
今天想看一看Vue的生命週期，我想通過我自己的理解將其記錄下來。
從網上搜到了各種關於Vue生命週期的博客，都寫的大致相同。我的理解看，主要分爲四個階段：create,mount,update,destroy。
create
在create階段，通過new Vue()方法獲取到Vue實例，在這一階段我們可以獲取到data，但是這個時候我們還不能獲取到真正的DOM。
這裏我們有兩個方法可以使用:
beforeCreate:整個Vue生命週期最開始的時候，就像生產一臺電腦，最開始，我要告訴所有人，我要開始生產這臺電腦了，但是這個時候實際上並沒有做任何事情，也許說喊個口號告訴大家：開始生產了。。
在這個階段，我們可以添加loading遮罩層，處於實例最開始的地方。
created: new Vue()創建實例已經完成，data，methods什麼的已經可以訪問了，但是在這個階段，仍然還沒有$el,沒有真正的DOM，不能對DOM進行操作，但是data可以訪問到了。就像：這臺電腦已經生產完成了，你可以拿到這臺電腦的型號參數，但是因爲還沒有出廠，你仍然不能使用這臺電腦，只能腦補。。。
mount
在mount階段，我們就可以拿到真正的DOM，並掛載到DOM樹中，對其進行下一步的操作。
beforeMount:掛載el之前，這個階段el還是虛擬的DOM,就像這臺電腦已經賣給你了，你說是擁有了這臺電腦，但是它還在運輸途中，然而你並沒有真正的電腦。
mounted:掛載之後，生成真正的DOM，並有可能已經掛載到了DOM樹上了。就像收到了電腦，並且已經在使用了。
像上面的這些週期create和mount，在整個生命週期中只會被執行一次。
update
在vue使用過程中，隨着狀態不斷的變化，進而引發update階段。
beforeUpdate:在視圖更新之前可以調用的函數，我們可以做一些如狀態的修改等。
updated:更新完畢之後，DOM又重新掛載到DOM樹上
destroy
銷燬，最後一步。如組件被從DOM樹中刪除或者替換，都會調用這個。
beforeDestroy:在銷燬之前執行的方法，我們可以在這裏彈窗詢問你真的要銷燬嗎？
destroyed: 組建銷燬後調用的方法，我們可以在這裏提示銷燬成功什麼的。
我們可以使用這個例子來實驗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello world!'
},
beforeCreate:function(){
console.group('before create : 創建前的狀態...')
console.log('%c%s','color:red','el :' + this.$el)
console.log('%c%s','color:red','data :' + this.$data)
console.log('%c%s','color:red','message :' + this.message)
},
created:function(){
console.group('created 創建完畢的狀態...')
console.log('%c%s','color:red','el :' + this.$el)
console.log('%c%s','color:red','data :' + this.$data)
console.log('%c%s','color:red','message :' + this.message)
},
beforeMount:function(){
console.group('before mount:掛載前狀態...')
console.log('%c%s','color:red','el :' + this.$el)
console.log('%c%s','color:red','data :' + this.$data)
console.log('%c%s','color:red','message :' + this.message)
},
mounted:function(){
console.group('mouted: 掛載結束狀態....')
console.log('%c%s','color:red','el :' + this.$el)
console.log('%c%s','color:red','data :' + this.$data)
console.log('%c%s','color:red','message :' + this.message)
},
beforeUpdate:function(){
console.group('before update 更新前狀態...')
console.log('%c%s','color:red','el :' + 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: 更新完成狀態....')
console.log('%c%s','color:red','el :' + this.$el)
console.log('%c%s','color:red','data :' + this.$data)
console.log('%c%s','color:red','message :' + this.message)
},
beforeDestroy:function(){
console.group('before destroy 銷燬前狀態...')
console.log('%c%s','color:red','el :' + 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 銷燬完成狀態....')
console.log('%c%s','color:red','el :' + this.$el)
console.log('%c%s','color:red','data :' + this.$data)
console.log('%c%s','color:red','message :' + this.message)
}
})
</script>
</body>
</html>當我們在瀏覽器中執行這個HTML的時候我們可以看到他的控制檯的提示：
可以看到，整個只有create,mount這兩個週期的函數執行了，並且都只執行了一次。當我們更新狀態，在控制檯修改數據：
得到了以下的結果：
可以看到，update階段執行了，不管你在這裏修改幾次狀態，都是隻有update階段的函數執行。
當我們銷燬實例，在控制檯打印app.$destroy()
可以看到，destory階段執行了
