vue生命週期總結

2022-02-03 15:21:55 字數 1157 閱讀 7728

vue2.x版本總共有8個生命週期鉤子,四個before,四個ed,再加上activated和deactivated兩個啟用鉤子,總共10個週期鉤子

1.鉤子說明

1. breforecreate 建立前執行,此時 data: undefined $el: undefined

2. created 建立後執行,此時 data: 有值 $el: undefined

例項已經建立完成之後被呼叫。在這一步,例項已完成以下的配置:資料觀測(data observer),屬性和方法的運算,

watch/event 事件**。然而,掛載階段還沒開始,$el 屬性目前不可見。

3. beforemount 載入前 此時 data: 有值 $el: (虛擬)

在掛載開始之前被呼叫:相關的 render 函式首次被呼叫,此時有了虛擬dom

4. mounted 載入後html已經渲染 此時 data: 有值 $el: (真實)

服務端渲染不被呼叫,el 被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫該鉤子,渲染為真實dom

5. beforeupdate 更新狀態前

6. updated 更新狀態後,服務端渲染不被呼叫

由於資料更改導致的虛擬 dom 重新渲染和打補丁,在這之後會呼叫該鉤子。當這個鉤子被呼叫時,元件 dom 已經更新,

所以你現在可以執行依賴於 dom 的操作。然而在大多數情況下,你應該避免在此期間更改狀態,因為這可能會導致更新無限迴圈。

7. beforedestroy 銷毀前(此處可以獲得this,來操作元件)

8. destroyed 銷毀後(此處不能獲得this,dom元素存在,只是不再受vue控制),服務端渲染不被呼叫

9. activated keep-alive元件啟用觸發,服務端渲染不被呼叫

10. deactivated keep-alive元件移除觸發,服務端渲染不被呼叫

2.鉤子圖示

vue生命週期理解總結

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

vue生命週期

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

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...