什么是Vue的生命周期？
從Vue實例創(chuàng)建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統(tǒng)稱為生命周期。
Vue生命周期的作用？
在Vue生命周期中會伴隨多個事件鉤子，這些事件鉤子在控制整個Vue實例中可以形成更好的邏輯。
Vue生命周期總共分為 ： 初始化 前后，創(chuàng)建前后，更新前后，銷毀前后
Vue生命周期過程？
Vue的生命周期過程在官網(wǎng)中給出了一張圖片可以幫助我們很好的理解
Vue生命周期
用文字的方式敘述就是
- Vue的生命周期從創(chuàng)建一個Vue實例開始，之后Vue要進行初始化事件和初始化生命周期。
- 執(zhí)行beforeCreate鉤子函數(shù)，這個函數(shù)執(zhí)行在初始化之后，創(chuàng)建組件之前，所以還不能訪問數(shù)據(jù)，組件中的data，ref都為undefind。
- 進入了初始化中，初始化data和props，并且給數(shù)據(jù)綁定上數(shù)據(jù)劫持
- 執(zhí)行created鉤子函數(shù)，這個函數(shù)在組件創(chuàng)建完成后立即被調(diào)用，組件中有了data對象，可以操作data，可以發(fā)請求和訪問數(shù)據(jù)了，ref依然為undefind。因為還沒有掛載，所以el不可用。
- 進行編譯選項，是否有el或template，再根據(jù)編譯選項作為模板將數(shù)據(jù)和compile函數(shù)(編譯函數(shù))進行結合，創(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ù)更新時
- 當數(shù)據(jù)被更新時調(diào)用beforeUpdate鉤子函數(shù)，它在頁面數(shù)據(jù)更新之前調(diào)用，并監(jiān)聽數(shù)據(jù)的變化，但不可以在這里更改數(shù)據(jù)
- 虛擬DOM重新渲染并應用更新
- updated數(shù)據(jù)更新完畢 在這個生命周期鉤子函數(shù)中 我們可以獲取到當前最新的數(shù)據(jù)（也就是頁面中的最新數(shù)據(jù)）
以上，更新階段描述完了，接下來是銷毀階段
- 當調(diào)用vm.$destroy()函數(shù)時，進入銷毀階段
- beforeDestroy 銷毀之前 還是可以使用HTML的，也可以獲取到數(shù)據(jù)
- 銷毀中 終止對象劫持（最主要）子組件，事件
- destroyed 銷毀之后 我們對 Vue實例提供的DOM操作就無效了 但是還是可以獲取到數(shù)據(jù)的
Vue生命周期鉤子函數(shù)？
| 鉤子函數(shù) | 作用 |
|---|---|
| ?? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? beforeCreate? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)執(zhí)行在組件創(chuàng)建、數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前，實例初始化之后被調(diào)用。在該階段組件未創(chuàng)建，不能訪問數(shù)據(jù)，組件中的 data，ref 均為 undefined。 |
| Created ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在組件創(chuàng)建完成后被立即調(diào)用，在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運算，watch/event 事件回調(diào)。但是還未渲染成HTML模板，組件中的data對象已經(jīng)存在，可以對data進行操作了，即可以訪問數(shù)據(jù)，發(fā)請求，ref依舊是undefined，掛載階段還沒開始，$el 屬性目前尚不可用。一般將數(shù)據(jù)的初始化和初始化頁面的請求放在這里面 |
| ?? ?? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? BeforeMount ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在組件掛載之前，在該階段頁面上還沒渲染出 HTML 元素，data 初始化完成，ref 依舊不可以操作，相關的 render 函數(shù)首次被調(diào)用。可以訪問數(shù)據(jù)，編譯模板結束，虛擬 dom 已經(jīng)存在。該鉤子在服務器端渲染期間不被調(diào)用。 |
| Mounted? ? ? ? ?? ? ? ? ? ? ? ? ? ? | 該函數(shù)是頁面完成掛載之后執(zhí)行的，這時 el 被新創(chuàng)建的 vm.$el 替換了，就可以操作 ref 了，一般會用于將組件初始時請求數(shù)據(jù)的方法放到這里面，filter 也是在這里生效?？梢阅玫綌?shù)據(jù)和節(jié)點，實例被掛載后調(diào)用。該鉤子在服務器端渲染期間不被調(diào)用。 |
| ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? BeforeUpdate ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務器端渲染期間不被調(diào)用，因為只有初次渲染會在服務端進行。 |
| ? ? ? ? ? ? ? ? ? ? Updated ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? | 由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子，在數(shù)據(jù)更新之后做一些處理，即監(jiān)控數(shù)據(jù)的變化。當這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應該避免在此期間更改狀態(tài)。如果要相應狀態(tài)改變，通常最好使用計算屬性或 watcher 取而代之。該鉤子在服務器端渲染期間不被調(diào)用。watch是監(jiān)控特定數(shù)據(jù)的變化，而updated是監(jiān)控組件里所有數(shù)據(jù)的變化。 |
| ?? ?? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? BeforeDestroy? ? ? ? ?? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? | 該函數(shù)在實例銷毀之前調(diào)用，這里的 ref 依舊可以操作，實例仍然完全可用，可以在這里做清除定時器的操作，防止內(nèi)存泄漏。該鉤子在服務器端渲染期間不被調(diào)用。 |
| ???? ? ?? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Destroyed? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? | 該函數(shù)在組件銷毀的時候執(zhí)行，即實例銷毀后調(diào)用，這里的 ref 不存在。該鉤子被調(diào)用后，對應 Vue 實例的所有指令都被解綁，所有的事件監(jiān)聽器被移除，所有的子實例也都被銷毀。該鉤子在服務器端渲染期間不被調(diào)用。 |
另外在使用keep-alive 時還存在兩個鉤子函數(shù)
| 鉤子函數(shù) | 作用 |
|---|---|
| Activated | 被 keep-alive 緩存的組件激活時調(diào)用。該鉤子在服務器端渲染期間不被調(diào)用。 |
| Deactivated | 被 keep-alive 緩存的組件停用時調(diào)用。該鉤子在服務器端渲染期間不被調(diào)用。 |
后記
這是我總結的關于Vue生命周期的一些知識，如有錯誤希望小伙伴們熱心的告訴我，我及時改正。
