Vue元件的生命週期

2021-10-07 20:00:39 字數 789 閱讀 7956

有乙個需要是分別在建立b元件和b-bro元件時利用事件匯流排$on(註冊)乙個事件,在銷毀元件前$off(登出)這個事件,

開始我是分別在created中$on,在beforedestory中$off,但是發現b-bro中的事件註冊不上該事件,最後發現是生命週期的原因:

b-bro beforecreate -> b-bro created -> b-bro beforemount -> b beforedestory -> b destoryed -> b-bro mounted

b-bro在created註冊的該事件,在b元件的beforedestory中又銷毀了。既然是生命週期的原因,那就調整下註冊事件的時間,放在mounted。

下面是在控制台列印的生命週期過程:

頁面結構

//a是這個元件的生命週期標識

//booleanvalue控制b和b-bro元件的切換,預設為 true//b是這個元件的生命週期標識

//b-bro是這個元件的生命週期標識

進入這個頁面的生命週期過程:

切換booleanvalue值為false後,b銷毀和b-bro建立的生命週期過程:

總結:beforecreate和created兩個生命週期是連著的,但beforemount和mounted不一定是連著的。

vue元件生命週期

beforecreate建立前 created建立後 beforemountvue裝載dom之前 mountedvue裝載dom之後 beforeupdate資料改變出發,改變前 updated資料改變出發改變後 beforedestory元件銷毀前 destoryed元件銷毀後 beforeact...

vue元件的生命週期

beforecreate 實列建立之前。created 實列建立完成。beforemount 掛載開始之前被呼叫。mounted 實列掛載到dom上 beforeupdate 響應式資料更新時呼叫 updated 虛擬dom重新渲染和打補丁之後呼叫 beforedestroy 實列銷毀之前呼叫 de...

Vue元件的生命週期

1.建立 2.掛載 3.更新 4.銷毀 1,元件初始化的時候會執行哪些生命週期函式?beforecreate created beforemount mounted 2,哪些生命週期函式會執行多次 beforeupdate updated beforecreate 當元件例項化的時候,做了乙個初始化...