Vue學習筆記 —— 生命週期
什麼是生命週期？
每個Vue實例在被創建之前都會經過一系列的初始化過程,這個過程就是vue的生命週期。
同時Vue在一整個生命週期中，提供了很多鉤子函數。利用這些鉤子函數，我們可以在生命週期的不同時刻進行操作。
鉤子函數如下：
- beforeCreate ------------ 創建前狀態
- created ------------ 創建完畢狀態
- beforeMount ------------ 掛載前狀態
- mounted ------------ 掛載結束狀態
- beforeUpdate ------------ 更新前狀態
- updated ------------ 更新完成狀態
- beforeDestroy ------------ 銷燬前狀態
- destroyed ------------ 銷燬完成狀態
每一個Vue實例在創建的過程中，都會依次調用這些鉤子函數
1、在beforeCreate和created鉤子函數之間的生命週期
此階段Vue會進行初始化事件，進行數據觀測。
在created時，data屬性會綁定數據（放在data中的屬性當值發生改變的同時，視圖也會改變）。
補充：此時還是沒有el選項。
2、created鉤子函數和beforeMount間的生命週期
此階段會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就停止了生命週期，直到在該vue實例上調用vm.$mount(el)。
如果後續調用了vm.$mount(el)，代碼就會繼續向下執行。
生命週期對template參數選項的影響：
- 如果vue實例對象中有template參數選項，則將其作爲模板編譯成render函數。
- 如果沒有template選項，則將外部HTML作爲模板編譯。
- template中的模板優先級要高於outer HTML的優先級。
3、beforeMount和mounted 鉤子函數間的生命週期
此階段給vue實例對象添加$el成員，並且替換掉掛在的DOM元素。
4、mounted
在mounted之前，HTML中的標籤還是以JavaScript中的虛擬DOM形式存在的，mounted之後，真實數據替換虛擬DOM。
如下圖所示，beforeMount的時候，h1標籤中的內容是通過{{message}}進行佔位的，也就是虛擬DOM節點。
5、beforeUpdate鉤子函數和updated鉤子函數間的生命週期
當vue發現data中的數據發生改變時會先後調用beforeUpdate和updated鉤子函數，會觸發對應組件的重新渲染。
6、beforeDestroy和destroyed鉤子函數間的生命週期
實例銷燬之前調用beforeDestroy鉤子函數。
補充：此時實例仍然完全可用。
Vue 實例銷燬後調用destroyed鉤子函數。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。
參考博客：詳解vue生命週期