vue生命週期的學習總結

2021-09-25 16:48:43 字數 2002 閱讀 8498

1、beforecreated:初始化了乙個空的vue例項物件,只有一些預設的生命週期函式和預設事件

var vm = new vue(,

methods:

},beforecreate(),

此時vue物件中的屬性和methods還沒被初始化,所以在這個生命週期函式中無法獲取到data中的資料和methods中的方法。

2、created:初始化屬性和methods,data中的資料和methods中的方法在這個階段後就可以獲取到了。

再到created生命週期函式中執行一下剛才在beforecreate中的**,結果顯示成功,表示這時候vue例項的屬性和methods已經初始化了。

3、beforemount:掛載前呼叫,vue開始編譯模版,在記憶體中生成乙個最終編譯好的模版字串,然後把這個模版字串渲染成記憶體中的dom,但是這個模版是存在於dom中的,並沒有掛載到真正的頁面上,

document.getelementbyid("h1").innertext的結果還是},表示頁面上的內容實際上還沒更改,因此但是這個模版是存在於dom中的,並沒有掛載到真正的頁面上,

4、mounted

el掛載到例項上後呼叫將記憶體中編輯好的模版渲染到頁面上,實現掛載,mounted是例項建立期間的最後乙個生命週期函式,到此為止,例項已經被完全建立

同樣的我們將beforemount函式中的**放到mounted函式中再次執行,結果顯示,頁面上的h1標籤中的msg已經被渲染,和data中的一致。這個階段,將上一階段在記憶體中編譯好的模版渲染到頁面上。

5、beforeupdate

元件執行前後的生命週期函式,更新前呼叫。會根據資料的改變呼叫,當執行beforeupdate時data中的資料已經更新,但是頁面上的資料還是舊的,所以此時頁面和data中的資料沒有同步,

結果表明在beforeupdate這個階段,當data中資料發生改變時,頁面中的資料不會跟data中的資料同步。

6、updated:更新後呼叫,頁面和data資料實現一致

我們再把beforeupdate中的**放到updated中執行,結果如上圖所示,表示頁面中的資料和data中的資料實現同步了。

7、beforedestory:例項銷毀前呼叫,主要解綁一些監聽事件等。執行beforedestory函式時,就開始從執行階段到銷毀階段了

8、destoryed:銷毀後,資料,方法、指令已經被完全銷毀

vue生命週期總結

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

vue生命週期理解總結

由於近期面試老是會問到生命週期,以及父子元件渲染和銷毀的順序問題,所以空閒時間決定自己用 測試一下,加深自己對這個的理解。希望對你們也有所幫助 廢話不多說,直接上 an highlighted block data methods beforecreate created beforemount m...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...