什么是Vue的生命周期遇骑？
從Vue實(shí)例創(chuàng)建、運(yùn)行揖曾、到銷毀期間落萎，總是伴隨著各種各樣的事件，這些事件翩肌，統(tǒng)稱為生命周期模暗。
Vue生命周期的作用？
在Vue生命周期中會伴隨多個事件鉤子念祭，這些事件鉤子在控制整個Vue實(shí)例中可以形成更好的邏輯。
Vue生命周期總共分為 ： 初始化 前后碍侦，創(chuàng)建前后粱坤，更新前后，銷毀前后
Vue生命周期過程瓷产？
Vue的生命周期過程在官網(wǎng)中給出了一張圖片可以幫助我們很好的理解
Vue生命周期
用文字的方式敘述就是
- Vue的生命周期從創(chuàng)建一個Vue實(shí)例開始站玄，之后Vue要進(jìn)行初始化事件和初始化生命周期。
- 執(zhí)行beforeCreate鉤子函數(shù)濒旦，這個函數(shù)執(zhí)行在初始化之后株旷，創(chuàng)建組件之前，所以還不能訪問數(shù)據(jù)尔邓，組件中的data晾剖，ref都為undefind。
- 進(jìn)入了初始化中梯嗽，初始化data和props齿尽，并且給數(shù)據(jù)綁定上數(shù)據(jù)劫持
- 執(zhí)行created鉤子函數(shù)，這個函數(shù)在組件創(chuàng)建完成后立即被調(diào)用灯节，組件中有了data對象循头，可以操作data绵估，可以發(fā)請求和訪問數(shù)據(jù)了，ref依然為undefind卡骂。因?yàn)檫€沒有掛載国裳，所以el不可用。
- 進(jìn)行編譯選項(xiàng)全跨，是否有el或template躏救，再根據(jù)編譯選項(xiàng)作為模板將數(shù)據(jù)和compile函數(shù)(編譯函數(shù))進(jìn)行結(jié)合，創(chuàng)建出虛擬DOM對象螟蒸。
以上初始化階段完成盒使，下面來描述創(chuàng)建過程
- 數(shù)據(jù)掛載前先執(zhí)行beforeMount鉤子函數(shù)，頁面還沒有創(chuàng)建出HTML元素七嫌，data初始化已經(jīng)完成少办，虛擬dom已經(jīng)存在
- 創(chuàng)建vm.$el來替換el，并切換掉原有的編譯模板诵原，生成一個真正可用的HTML
- 完成頁面的數(shù)據(jù)掛載后執(zhí)行Mounted英妓，這時可以操作數(shù)據(jù)和DOM了
以上，創(chuàng)建階段描述完了绍赛，接下來是數(shù)據(jù)更新時
- 當(dāng)數(shù)據(jù)被更新時調(diào)用beforeUpdate鉤子函數(shù)蔓纠，它在頁面數(shù)據(jù)更新之前調(diào)用，并監(jiān)聽數(shù)據(jù)的變化吗蚌，但不可以在這里更改數(shù)據(jù)
- 虛擬DOM重新渲染并應(yīng)用更新
- updated數(shù)據(jù)更新完畢 在這個生命周期鉤子函數(shù)中 我們可以獲取到當(dāng)前最新的數(shù)據(jù)（也就是頁面中的最新數(shù)據(jù)）
以上腿倚，更新階段描述完了，接下來是銷毀階段
- 當(dāng)調(diào)用vm.$destroy()函數(shù)時蚯妇，進(jìn)入銷毀階段
- beforeDestroy 銷毀之前 還是可以使用HTML的敷燎，也可以獲取到數(shù)據(jù)
- 銷毀中 終止對象劫持（最主要）子組件，事件
- destroyed 銷毀之后 我們對 Vue實(shí)例提供的DOM操作就無效了 但是還是可以獲取到數(shù)據(jù)的
Vue生命周期鉤子函數(shù)箩言？
| 鉤子函數(shù) | 作用 |
|---|---|
| ?? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? beforeCreate? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)執(zhí)行在組件創(chuàng)建硬贯、數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前，實(shí)例初始化之后被調(diào)用陨收。在該階段組件未創(chuàng)建饭豹，不能訪問數(shù)據(jù)，組件中的 data务漩，ref 均為 undefined拄衰。 |
| Created ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在組件創(chuàng)建完成后被立即調(diào)用，在這一步菲饼，實(shí)例已完成以下的配置：數(shù)據(jù)觀測 (data observer)肾砂，屬性和方法的運(yùn)算，watch/event 事件回調(diào)宏悦。但是還未渲染成HTML模板镐确，組件中的data對象已經(jīng)存在包吝，可以對data進(jìn)行操作了，即可以訪問數(shù)據(jù)源葫，發(fā)請求诗越，ref依舊是undefined，掛載階段還沒開始息堂，$el 屬性目前尚不可用嚷狞。一般將數(shù)據(jù)的初始化和初始化頁面的請求放在這里面 |
| ?? ?? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? BeforeMount ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在組件掛載之前，在該階段頁面上還沒渲染出 HTML 元素荣堰，data 初始化完成床未，ref 依舊不可以操作，相關(guān)的 render 函數(shù)首次被調(diào)用振坚∞备椋可以訪問數(shù)據(jù)，編譯模板結(jié)束渡八，虛擬 dom 已經(jīng)存在啃洋。該鉤子在服務(wù)器端渲染期間不被調(diào)用。 |
| Mounted? ? ? ? ?? ? ? ? ? ? ? ? ? ? | 該函數(shù)是頁面完成掛載之后執(zhí)行的屎鳍，這時 el 被新創(chuàng)建的 vm.$el 替換了宏娄，就可以操作 ref 了，一般會用于將組件初始時請求數(shù)據(jù)的方法放到這里面逮壁，filter 也是在這里生效孵坚。可以拿到數(shù)據(jù)和節(jié)點(diǎn)貌踏，實(shí)例被掛載后調(diào)用十饥。該鉤子在服務(wù)器端渲染期間不被調(diào)用。 |
| ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? BeforeUpdate ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在數(shù)據(jù)更新時調(diào)用祖乳，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM秉氧，比如手動移除已添加的事件監(jiān)聽器眷昆。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯诜?wù)端進(jìn)行汁咏。 |
| ? ? ? ? ? ? ? ? ? ? Updated ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? | 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁亚斋，在這之后會調(diào)用該鉤子，在數(shù)據(jù)更新之后做一些處理攘滩，即監(jiān)控?cái)?shù)據(jù)的變化帅刊。當(dāng)這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新漂问，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作赖瞒。然而在大多數(shù)情況下女揭，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變栏饮，通常最好使用計(jì)算屬性或 watcher 取而代之吧兔。該鉤子在服務(wù)器端渲染期間不被調(diào)用。watch是監(jiān)控特定數(shù)據(jù)的變化袍嬉，而updated是監(jiān)控組件里所有數(shù)據(jù)的變化境蔼。 |
| ?? ?? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? BeforeDestroy? ? ? ? ?? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在實(shí)例銷毀之前調(diào)用，這里的 ref 依舊可以操作伺通，實(shí)例仍然完全可用箍土，可以在這里做清除定時器的操作，防止內(nèi)存泄漏罐监。該鉤子在服務(wù)器端渲染期間不被調(diào)用吴藻。 |
| ???? ? ?? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Destroyed? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? | 該函數(shù)在組件銷毀的時候執(zhí)行，即實(shí)例銷毀后調(diào)用笑诅，這里的 ref 不存在诊赊。該鉤子被調(diào)用后，對應(yīng) Vue 實(shí)例的所有指令都被解綁月弛，所有的事件監(jiān)聽器被移除尊沸，所有的子實(shí)例也都被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用妇多。 |
另外在使用keep-alive 時還存在兩個鉤子函數(shù)
| 鉤子函數(shù) | 作用 |
|---|---|
| Activated | 被 keep-alive 緩存的組件激活時調(diào)用伤哺。該鉤子在服務(wù)器端渲染期間不被調(diào)用。 |
| Deactivated | 被 keep-alive 緩存的組件停用時調(diào)用者祖。該鉤子在服務(wù)器端渲染期間不被調(diào)用立莉。 |
后記
這是我總結(jié)的關(guān)于Vue生命周期的一些知識，如有錯誤希望小伙伴們熱心的告訴我七问，我及時改正蜓耻。
