Vue 生命週期

/*

* @version: V.1.0.0.1

* @Author: fenggang

* @Date: 2019-06-18 19:38:19

* @LastEditors: fenggang

* @LastEditTime: 2019-06-18 20:22:14

* @Descripttion: Vue Life Cycle

*/

---

Vue 生命週期:

1. new Vue() 實例 Vue 對象
2. beforeCreate 在 Vue 對象實力以前(最早加載)，能夠先作一個加載動畫效果
3. created 已經實例完 Vue 對象，Dom 對象還未生成(結束動畫加載，能夠渲染 Dom)，能夠作的事情給屬性賦值以及請求的網絡接口加載
4. 開始檢測 el [el 爲 element ]是否存在,若是不存在則檢查最後 Vue 對象以後 .$mount() 是否存在裏面參數爲 '#app', 若是二者都不存在生命週期在此結束
5. 檢測 template 檢查組件，組件當中的內容爲 html 標籤(能夠自定義組件內容)，也能夠本身定義的標籤,若是 第4條內容不存在 template 要是也不存在，沒有可渲染的內容則生命週期結束
6. beforeMount 掛載，開始編譯 template 模板裏內容，只是在虛擬 Dom 中執行
7. mounted 完成編譯，開始掛在鉤子函數，當前頁面顯示完成執行函數
8. beforeUpdate 組件發生更新以前
9. updated 組件更新以後
10. beforeDestroy 銷燬以前，代碼執行已基本到結束
11. destroyed 方法執行完成銷燬，代碼執行結束

---

生命週期執行順序總結：

1. beforeCreate 組件實例化以前之執行的函數
2. created 組件實例化完成，但頁面還未顯示
3. beforeMount 組件掛載前，頁面仍未顯示，但虛擬 Dom 已經配置
4. mounted 組件掛載以後，此方法執行後，頁面顯示
5. beforeUpdate 組件更新前，頁面仍未更新，但虛擬 Dom 已經配置
6. updated 組件更新，此方法執行後，頁面顯示
7. beforeDestory 組件銷燬前
8. destoryed 組件銷燬