- 創(chuàng)建前/后
在beforeCreate階段, Vue 實(shí)例掛載元素$el和數(shù)據(jù)對(duì)象$data都為undefined,還沒(méi)初始化;在created階段,Vue 實(shí)例的數(shù)據(jù)對(duì)象$data有了,但$el還沒(méi)有。 - 載入前/后
在beforeMount階段, Vue 實(shí)例的$el和$data都初始化,但掛載之前為虛擬DOM的節(jié)點(diǎn),data.message還沒(méi)替換;在mounted階段,Vue 實(shí)例掛載完成,data.message成功渲染。 - 更新前/后
當(dāng)$data變化時(shí),會(huì)觸發(fā)beforeUpdate和updated方法 - 銷毀前/后
在執(zhí)行destroy方法,對(duì)$data的改變不會(huì)再觸發(fā)周期函數(shù),說(shuō)明此時(shí) Vue 實(shí)例已經(jīng)解除了事件監(jiān)聽以及和 DOM 的綁定,但是 DOM 結(jié)構(gòu)依然存在。
生命周期(常用)
created 和 mounted 相關(guān)
-
beforeCreate:$el和$data并未初始化; -
created:完成了$data初始化,$el沒(méi)有; -
beforeMount:完成了$el和$data的初始化; -
mounted:完成了掛載。
updated 相關(guān)
$data 里的值被修改后,將會(huì)觸發(fā) updated 的操作。
Vue 生命周期的作用是什么?
Vue 生命周期中有許多個(gè)鉤子,更好地控制整 Vue 實(shí)例的過(guò)程,形成好的邏輯。
btw DOM 渲染在 mounted 中就已經(jīng)完成了。