1.生命周期圖示
從創(chuàng)建vue實(shí)例到最后組件銷毀的過程
6226474-c99b25c12b7dba90.png
2.生命周期鉤子整理娃弓，總共10個(gè)
| 生命周期鉤子 | 詳細(xì) |
|---|---|
| beforeCreate | 組件實(shí)例剛創(chuàng)建荆永，組件和data屬性被計(jì)算之前 |
| created | 實(shí)例創(chuàng)建完成沐兰，data屬性綁定，dom還沒有生成障簿，$el還不能使用 |
| beforeMount | 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用还惠。 |
| mounted | 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)，這不會觸發(fā)附加的重渲染過程蔬浙。 |
| updated | 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁猪落，在這之后會調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)畴博，組件 DOM 已經(jīng)更新笨忌，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。 |
| activated | keep-alive 組件激活時(shí)調(diào)用俱病。 |
| deactivated | keep-alive 組件停用時(shí)調(diào)用官疲。 |
| beforeDestroy | 實(shí)例銷毀之前調(diào)用。在這一步亮隙，實(shí)例仍然完全可用途凫。 |
| destroyed | Vue 實(shí)例銷毀后調(diào)用。調(diào)用后咱揍，Vue 實(shí)例指示的所有東西都會解綁定颖榜，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀煤裙。 |
3.注意事項(xiàng)
1.在created鉤子中可以對data數(shù)據(jù)進(jìn)行操作掩完，這個(gè)時(shí)候可以進(jìn)行ajax請求將返回的數(shù)據(jù)賦給data
2.在mounted鉤子對掛載的dom進(jìn)行操作
3.在使用vue-router時(shí)有時(shí)需要使用<keep-alive></keep-alive>來緩存組件狀態(tài)，這個(gè)時(shí)候created鉤子就不會被重復(fù)調(diào)用了硼砰，如果我們的子組件需要在每次加載的時(shí)候進(jìn)行某些操作且蓬，可以使用activated鉤子觸發(fā)。
4.beforeDestroy题翰，頁面組件內(nèi)容銷毀前使用恶阴，所有對象數(shù)據(jù)都會清空诈胜。
