標註圖+部分舉例聊聊Vue生命週期
“你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。”
現在專案中遇到了，好好回頭總結一波Vue生命週期，以後用到的時候再來翻翻。
啥叫Vue生命週期？
每個 Vue 例項在被建立時都要經過一系列的初始化過程。
例如：從開始建立、初始化資料、編譯模板、掛載Dom、資料變化時更新DOM、解除安裝等一系列過程。
我們稱 這一系列的過程 就是Vue的生命週期。
通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。
同時在這個過程中也會執行一些叫做 生命週期鉤子 的函式，這給了使用者在不同階段新增自己的程式碼的機會，利用各個鉤子來完成我們的業務程式碼。
啥也不說，先來個乾貨
這是對於Vue生命週期，官網給的那張圖的標註圖，圖片網上看到的，我覺得標註地很nice，建議一步步仔細看完圖片，然後把圖片自己悄悄儲存下來，對照著圖片的內容看第二部分的舉例說明。
我相信程式員看程式碼比看文字更容易理解
對照著上圖標註的內容，我們一個鉤子一個鉤子地舉例說明。
1.beforeCreate
例項初始化之後、建立例項之前的執行的鉤子事件。
如下例子：
<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
test: '天王蓋地虎'
},
beforeCreate() {
console.log('beforeCreate鉤子事件：');
console.log($this.data);
console.log($this.el);
}
})
</script>
</body>
複製程式碼
得到的結果是：
：建立例項之前，資料觀察和事件配置都沒好準備好。也就是資料也沒有、DOM也沒生成。
2.created
例項建立完成後執行的鉤子
在上一段程式碼例子中，我們再來console一下。
<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
test: '天王蓋地虎'
},
created() {
console.log('created鉤子事件：');
console.log(this.$data);
console.log(this.$el);
}
})
</script>
</body>
複製程式碼
得到的結果是：
：例項建立完成後，我們能讀取到資料data的值，但是DOM還沒生成，掛載屬性el還不存在。
3.beforeMount
將編譯完成的html掛載到對應的 虛擬DOM 時觸發的鉤子
此時頁面並沒有內容。
即此階段解讀為: 即將掛載
我們列印下此時的$el
beforeMount() {
console.log('beforeMount鉤子事件：');
console.log(this.$el);
}
複製程式碼
得到的結果是：
小總結：此時的el不再是undefined,成功關聯到我們指定的dom節點。但是此時的{{test}}還沒有成功渲染成data中的資料，頁面沒有內容。
PS：相關的render函式首次被呼叫。
4.mounted
編譯好的html掛載到頁面完成後所執行的事件鉤子函式。
此時的階段解讀為： 掛載完畢階段
我們再列印下此時$el看看：
mounted() {
console.log('mounted鉤子事件：');
console.log(this.$el);
}
複製程式碼
得到的結果是：
可見， {{test}}已經成功渲染成data裡面test對應的值“天王蓋地虎”了。
小總結：此時編譯好的HTML已經掛載到了頁面上，頁面上已經渲染出了資料。一般會利用這個鉤子函式做一些ajax請求獲取資料進行資料初始化。
PS：mounted在整個例項中只執行一次。
5.beforeUpdate
小總結：當修改vue例項的data時，vue就會自動幫我們更新渲染檢視，在這個過程中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改資料的時候，更新渲染檢視之前就會觸發鉤子beforeUpdate。
6.updated
小總結：此階段為更新渲染檢視之後，此時再讀取檢視上的內容，已經是最新的內容。
PS:
1、該鉤子在伺服器端渲染期間不被呼叫。
2、應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。
7.beforeDestroy
小總結：呼叫例項的destroy( )方法可以銷燬當前的元件，在銷燬前，會觸發beforeDestroy鉤子。
8.destroyed
小總結：成功銷燬之後，會觸發destroyed鉤子，此時該例項與其他例項的關聯已經被清除，Vue例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。
話在最後
其實還有三個生命週期鉤子沒列出來：activated、deactivated、errorCaptured。這三個大家遇到了自行了解哈,暫且這樣吧。