vue生命週期理解總結

2021-10-09 11:20:25 字數 823 閱讀 1434

由於近期面試老是會問到生命週期,以及父子元件渲染和銷毀的順序問題,所以空閒時間決定自己用**測試一下,加深自己對這個的理解。希望對你們也有所幫助

廢話不多說,直接上**

// an highlighted block

data()

},methods:},

beforecreate()

,created()

,beforemount()

,mounted()

,beforeupdate()

,updated()

,beforedestroy()

,destroyed()

,

**測試結果

下面我講解下過程發生了什麼

由測試結果可以看出來

data和methods裡面資料和函式方法都沒有初始化,所以呼叫失敗,dom tree ($el)也沒開始初始化

data和methods都已經初始化完畢,可以進行呼叫,但是dom tree ($el)也沒開始初始化

data和methods裡面資料和函式方法可以進行呼叫,但是dom tree ($el)也沒開始初始化

data和methods裡面資料和函式方法可以進行呼叫,,dom tree($el)也被渲染載入出來了

vue生命週期總結(個人理解)

附上官網生命週期圖 beforecreate 開始建立階段,這個階段主要做的事是,初始化vue例項,此時元件的物件還未建立,el 和 data 並未初始化,因此無法訪問methods,data等上的方法和資料。created vue例項建立之後呼叫,資料觀察,屬性和方法的運算,完成了data的初始化...

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

vue生命週期總結

vue2.x版本總共有8個生命週期鉤子,四個before,四個ed,再加上activated和deactivated兩個啟用鉤子,總共10個週期鉤子 1.鉤子說明 1.breforecreate 建立前執行,此時 data undefined el undefined 2.created 建立後執行...