就像一個人诫欠,從出生到死亡會經(jīng)歷童年涵卵、少年、青年呕诉、中年缘厢、老年各個階段吃度。如果你是上帝甩挫,你可以讓他童年做著無憂無慮的事情、少年用功讀書椿每、青年到處游學(xué)伊者、中年娶妻生子、老年兒孫滿堂间护。
Vue.js讓你有了上帝之手亦渗,可以操縱Vue實例的整個生命周期。
一汁尺、生命周期
每個 Vue 實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程法精。例如,實例需要:
配置數(shù)據(jù)觀測(data observer)
編譯模版痴突、掛載實例到 DOM
在數(shù)據(jù)變化時更新 DOM
在這個過程中搂蜓,實例也會調(diào)用一些生命周期鉤子 ,這就給我們提供了執(zhí)行自定義邏輯的機會辽装。從Vue實例創(chuàng)建帮碰、運行、到銷毀期間拾积,會伴隨著觸發(fā)各種各樣的事件殉挽,這些事件,統(tǒng)稱為生命周期拓巧。
生命周期鉤子 = 生命周期函數(shù) = 生命周期事件
二斯碌、Vue實例生命周期圖示
生命周期中事件劃分:
1) 創(chuàng)建期間的生命周期函數(shù)
beforeCreate
實例剛在內(nèi)存中被創(chuàng)建出來,此時肛度,還沒有初始化好 data 和 methods 屬性;
created
實例已經(jīng)在內(nèi)存中創(chuàng)建完畢输拇,此時 data 和 methods 已經(jīng)創(chuàng)建完畢,此時還沒有開始編譯模板;
beforeMount
此時已經(jīng)完成了模板的編譯贤斜,但是還沒有掛載到頁面中;
mounted
此時已經(jīng)將編譯好的模板策吠,掛載到了頁面指定的容器中顯示;
2) 運行期間的生命周期函數(shù)
beforeUpdate
狀態(tài)更新之前執(zhí)行此函數(shù)逛裤, 此時 data 中的狀態(tài)值是最新的,但是界面上顯示的 數(shù)據(jù)還是舊的猴抹,因為此時還沒有開始重新渲染DOM節(jié)點;
updated
實例更新完畢之后調(diào)用此函數(shù)带族,此時 data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù),都已經(jīng)完成了更新蟀给,界面已經(jīng)被重新渲染好了蝙砌!
3) 銷毀期間的生命周期函數(shù)
beforeDestroy
實例被銷毀之前調(diào)用,在該函數(shù)中跋理,實例仍然完全可用择克。
destroyed
Vue 實例銷毀后調(diào)用,調(diào)用該函數(shù)后前普,Vue 實例指示的所有東西都會解綁定肚邢,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀拭卿。