官方的Vue生命周期圖
具體的鉤子函數(shù)
| 鉤子函數(shù) | 描述 |
|---|---|
| beforeCreate | 組件實(shí)例剛被創(chuàng)建，數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用。 |
| created | 組件實(shí)例創(chuàng)建完成，在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見 |
| beforeMounted | 模版編譯/掛載之前 |
| mounted | 模版編譯/掛載之后(不保證組件已在document中) el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。 |
| beforeUpdate | 組件更新前； 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過程。 |
| updated | 組件更新后； 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)。 |
| activated | for keep-alive，組件被激活時(shí)調(diào)用 |
| deactivated | for keep-alive，組件被移除時(shí)調(diào)用 |
| beforeDestory | 組件銷毀前調(diào)用 |
| destoryed | 組件銷毀后調(diào)用 |
1、beforeCrete: 此時(shí),$el和data都為undefined,沒有初始化
2、created: 創(chuàng)建后data初始化了,而$el沒有
3、beforeMount: 掛在之前,$el和data都初始化了
4、mounted: Vue實(shí)例掛載完成了
5、data數(shù)據(jù)變化時(shí)只會(huì)觸發(fā)update
6、執(zhí)行完destroy操作后,data里的數(shù)據(jù)沒有變化,但是Dom結(jié)構(gòu)還存在,也就是Vue實(shí)例不再受控制了,完成了解耦
生命周期簡(jiǎn)化圖
常用生命周期鉤子函數(shù)使用
- beforecreate : 舉個(gè)栗子：可以在這加個(gè)loading事件
- created ：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行
- mounted ： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
- beforeDestory： 你確認(rèn)刪除XX嗎？
- destoryed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
參考文章
https://segmentfault.com/a/1190000009677699#articleHeader4
http://www.lxweimin.com/p/e9f884b6ba6c
