Vue 3.0 的生命周期

1. new Vue()
   new一個vue實例化對象

2. init Event & Lifecycle
   執行一些初始化和生命周期相關的操作

3. beforeCreate
   組件實例剛剛被創建出來
   執行一些初始化和生命周期相關的操作

4. init injections & reactivity
   初始化注入和校驗

5. created
   data數據屬性已經綁定，放在data中的屬性當值發生改變的同時，視圖也會改變
   組件實例創建完成，屬性已經綁定，但是DOM還沒有生成，$el屬性還不存在
   此時還沒有創建el

6. Has "el" option?
   判斷是否存在el
   如果有的話，就向下編譯
   如果沒有el，則停止編譯，也就意味着停止了生命周期，直到在該vue實例上調用vm.$mount(el)

   如果注釋掉el:"#app",程序到created就停止了

7. Has "template" option?
   判斷是否有template？
   如果有template,則將其編譯成render函數
   如果沒有template，則將外部的HTML作為模板編譯
   template中的模板優先級要高於outer HTML的優先級

8. Compile template into render function
   在vue對象中還有一個render函數，它是以createElement作為參數，然后做渲染操作
   render函數選項 > template選項 > outer HTML.

9. beforeMount
   beforeMount之前el上還是undefined

10. Create vm.$el and replace "el" with it
    給vue實例對象添加$el成員，並且替換掉掛在的DOM元素

11. mounted
    在這發起后端請求，拿回數據，配合路由鈎子做一些事情

12.beforeUpdate
當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先后調用beforeUpdate和updated鈎子函數。
13. Update

beforeUpdate,可以監聽到data的變化但是view層沒有被重新渲染，view層的數據沒有變化。等到updated的時候 view層才被重新渲染，數據更新。

14. beforeDestory
    beforeDestroy鈎子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。

15. Destroyed
    destroyed鈎子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。