Vue 3.0 的生命周期
new Vue()
new一個vue實例化對象init Event & Lifecycle
執行一些初始化和生命周期相關的操作beforeCreate
組件實例剛剛被創建出來
執行一些初始化和生命周期相關的操作init injections & reactivity
初始化註入和校驗created
data數據屬性已經綁定,放在data中的屬性當值發生改變的同時,視圖也會改變
組件實例創建完成,屬性已經綁定,但是DOM還沒有生成,$el屬性還不存在
此時還沒有創建elHas "el" option?
判斷是否存在el
如果有的話,就向下編譯
如果沒有el,則停止編譯,也就意味著停止了生命周期,直到在該vue實例上調用vm.$mount(el)如果註釋掉el:"#app",程序到created就停止了
Has "template" option?
判斷是否有template?
如果有template,則將其編譯成render函數
如果沒有template,則將外部的HTML作為模板編譯
template中的模板優先級要高於outer HTML的優先級Compile template into render function
在vue對象中還有一個render函數,它是以createElement作為參數,然後做渲染操作
render函數選項 > template選項 > outer HTML.beforeMount
beforeMount之前el上還是undefinedCreate vm.$el and replace "el" with it
給vue實例對象添加$el成員,並且替換掉掛在的DOM元素mounted
在這發起後端請求,拿回數據,配合路由鉤子做一些事情
12.beforeUpdate
當vue發現data中的數據發生了改變,會觸發對應組件的重新渲染,先後調用beforeUpdate和updated鉤子函數。
Update
beforeUpdate,可以監聽到data的變化但是view層沒有被重新渲染,view層的數據沒有變化。等到updated的時候 view層才被重新渲染,數據更新。
beforeDestory
beforeDestroy鉤子函數在實例銷毀之前調用。在這一步,實例仍然完全可用。Destroyed
destroyed鉤子函數在Vue 實例銷毀後調用。調用後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。
Vue 3.0 的生命周期