Vue 實例有一個完整的生命周期福压,也就是從開始創(chuàng)建、初始化數(shù)據(jù)或舞、編譯模板荆姆、掛載 Dom、渲染→更新→渲染映凳、銷毀等一系列過程胆筒,我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創(chuàng)建到銷毀的過程诈豌,就是生命周期仆救。
每一個組件或者實例都會經(jīng)歷一個完整的生命周期,總共分為三個階段:初始化
队询、運行中
派桩、銷毀
构诚。
實例蚌斩、組件通過 new Vue() 創(chuàng)建出來之后會初始化事件和生命周期,然后就會執(zhí)行 beforeCreate 鉤子函數(shù)范嘱,這個時候送膳,數(shù)據(jù)還沒有掛載呢,只是一個空殼丑蛤,無法訪問到數(shù)據(jù)和真實的 dom叠聋,一般不做操作掛載數(shù)據(jù),綁定事件等等受裹,然后執(zhí)行 created 函數(shù)碌补,這個時候已經(jīng)可以使用到數(shù)據(jù)虏束,也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會觸發(fā) updated 函數(shù),在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機會厦章,不會觸發(fā)其他的鉤子函數(shù)镇匀,一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始找實例或者組件對應的模板,編譯模板為虛擬 dom 放入到 render 函數(shù)中準備渲染袜啃,然后執(zhí)行 beforeMount 鉤子函數(shù)汗侵,在這個函數(shù)中虛擬 dom 已經(jīng)創(chuàng)建完成,馬上就要渲染,在這里也可以更改數(shù)據(jù)群发,不會觸發(fā) updated晰韵,在這里可以在渲染前最后一次更改數(shù)據(jù)的機會,不會觸發(fā)其他的鉤子函數(shù)熟妓,一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始 render雪猪,渲染出真實 dom,然后執(zhí)行 mounted 鉤子函數(shù)起愈,此時浪蹂,組件已經(jīng)出現(xiàn)在頁面中,數(shù)據(jù)告材、真實 dom 都已經(jīng)處理好了,事件都已經(jīng)掛載好了坤次,可以在這里操作真實 dom 等事情...
當組件或?qū)嵗臄?shù)據(jù)更改之后,會立即執(zhí)行 beforeUpdate斥赋,然后 Vue 的虛擬 dom 機制會重新構建虛擬 dom 與上一次的虛擬 dom 樹利用 diff 算法進行對比之后重新渲染缰猴,一般不做什么事兒
當更新完成后,執(zhí)行 updated疤剑,數(shù)據(jù)已經(jīng)更改完成滑绒,dom 也重新 render 完成,可以操作更新后的虛擬 dom
當經(jīng)過某種途徑調(diào)用$destroy 方法后隘膘,立即執(zhí)行 beforeDestroy疑故,一般在這里做一些善后工作,例如清除計時器弯菊、清除非指令綁定的事件等等
組件的數(shù)據(jù)綁定纵势、監(jiān)聽...去掉后只剩下 dom 空殼,這個時候管钳,執(zhí)行 destroyed钦铁,在這里做善后工作也可以