Vue的生命周期函數(shù)

每一個Vue實例或者組件都有一個完整的生命周期,一個完整的生命周期包括初始化階段、運行中階段和銷毀階段。

初始化階段:

1.實例、組件被創(chuàng)建出來以后,就會被初始化事件和生命周期。然后就會執(zhí)行beforeCreate鉤子函數(shù),這個時候,數(shù)據(jù)沒有被掛載到,也不能獲取真實dom,只是一個空殼,一般不做操作。

2.掛載數(shù)據(jù)、綁定事件后,然后執(zhí)行created鉤子函數(shù),這個時候可以獲取到數(shù)據(jù),一般在這個階段做一些數(shù)據(jù)操作,比如ajax請求等異步請求。

3.找到實例或者組件的對應(yīng)的模板,編譯模板將虛擬dom放入到render函數(shù)中 馬上就要進行渲染,然后執(zhí)行beforeUpdate鉤子函數(shù),這個時候虛擬dom馬上就要被渲染成真實dom,在這個階段也可以進行一些數(shù)據(jù)的操作,并且不會因此而觸發(fā)updated鉤子函數(shù)。

4.render函數(shù)將虛擬dom被渲染成真實dom,然后執(zhí)行created鉤子函數(shù),這個階段既可以獲取數(shù)據(jù),也可以獲取到真實dom,所以可以在這個 階段進行dom的操作。

運行中階段:

5.當組件、實例數(shù)據(jù)發(fā)生更改后,會立即執(zhí)行beforeUpdate鉤子函數(shù),構(gòu)建新的虛擬dom與之前的虛擬dom進行diff算法比較之后進行重新渲染,一般不做操作。

6.當更新完成后,執(zhí)行updated,數(shù)據(jù)已經(jīng)更改完成,dom也重新渲染,可以獲取到更新后的數(shù)據(jù)。

銷毀階段:

7.當調(diào)用$distroy方法后,立即執(zhí)行beforeDestroy鉤子函數(shù),一般可以在這里做一些善后操作,比如清除計時器等。

8.組件、實例的數(shù)據(jù)綁定和事件監(jiān)聽等去掉后只剩些一個dom空殼,然后執(zhí)行distroyed鉤子函數(shù)。






?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容