beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
1. 在beforeCreate和created鉤子函數(shù)之間的生命周期
在這個(gè)生命周期之間筹我,進(jìn)行初始化事件您朽,進(jìn)行數(shù)據(jù)的觀測忿危,可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定(放在data中的屬性當(dāng)值發(fā)生改變的同時(shí),視圖也會改變)游岳。
注意看下:此時(shí)還是沒有el選項(xiàng)
2. created鉤子函數(shù)和beforeMount間的生命周期
在這一階段發(fā)生的事情還是比較多的。
首先會判斷對象是否有el選項(xiàng)夹厌。如果有的話就繼續(xù)向下編譯稽揭,如果沒有el選項(xiàng),則停止編譯浪蹂,也就意味著停止了生命周期抵栈,直到在該vue實(shí)例上調(diào)用vm.$mount(el)。
此時(shí)注釋掉el
created停止
template參數(shù)選項(xiàng)的有無對生命周期的影響坤次。
(1).如果vue實(shí)例對象中有template參數(shù)選項(xiàng)古劲,則將其作為模板編譯成render函數(shù)。
(2).如果沒有template選項(xiàng)缰猴,則將外部HTML作為模板編譯产艾。
(3).可以看到template中的模板優(yōu)先級要高于outer HTML的優(yōu)先級。
render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.
3. beforeMount和mounted 鉤子函數(shù)間的生命周期
此時(shí)是給vue實(shí)例對象添加$el成員滑绒,并且替換掉掛在的DOM元素闷堡。
4. mounted
在mounted之前h1中還是通過{{message}}進(jìn)行占位的,因?yàn)榇藭r(shí)還有掛在到頁面上疑故,還是JavaScript中的虛擬DOM形式存在的杠览。在mounted之后可以看到h1中的內(nèi)容發(fā)生了變化。
5. beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期
當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變纵势,會觸發(fā)對應(yīng)組件的重新渲染踱阿,先后調(diào)用beforeUpdate和updated鉤子函數(shù)管钳。
6.beforeDestroy和destroyed鉤子函數(shù)間的生命周期
beforeDestroy鉤子函數(shù)在實(shí)例銷毀之前調(diào)用。在這一步软舌,實(shí)例仍然完全可用才漆。
destroyed鉤子函數(shù)在Vue 實(shí)例銷毀后調(diào)用。調(diào)用后葫隙,Vue 實(shí)例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除躏仇,所有的子實(shí)例也會被銷毀恋脚。
引用:https://segmentfault.com/a/1190000011381906